landing-pages/site/assets/scss/_video.scss

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
@import "colors";
@import "media";

.video-section {
  display: flex;
  border: solid 1px #cbcbcb;
  padding: 40px;

  @media (max-width: $tablet) {
    flex-direction: column;
    max-width: 560px;
    margin: 0 auto;
    padding: 20px;
  }
}

.video-wrapper {
  flex: 1;

  .video-container {
    display: none;

    &:last-child {
      display: block;
    }
  }

  .anchor {
    position: fixed;

    &:target + .video-container {
      display: block;
    }

    &:target + .video-container ~ .video-container {
      display: none;
    }
  }
}

.video-list-wrapper {
  overflow-y: auto;
  max-height: 403px;
  max-width: 370px;
  width: 100%;
  margin-left: 40px;

  @media (max-width: $tablet) {
    max-width: unset;
    margin-left: 0;
  }

  &::-webkit-scrollbar {
    -webkit-appearance: none;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, .5);
  }

  &::-webkit-scrollbar:vertical {
    width: 9px;
  }

}

.video-list {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;

  &__item {
    display: flex;
    align-items: center;
    border-bottom: solid 1px map-get($colors, very-light-pink);
    padding: 16px 0;

    $item: &;
    #{$item}--title {
      @extend .bodytext__medium--brownish-grey;
      margin-left: 9px;
      vertical-align: middle;
    }

    &--icon-container {
      display: flex;
    }

    &:hover, &.active {
      #{$item}--title {
        font-weight: 500;
      }

      svg {
        path {
          fill: map-get($colors, brownish-grey);
          stroke: none;
        }
      }
    }
  }
}