lila/ui/bits/css/_video.scss

.video {
  .box__top form {
    position: relative;

    span {
      position: absolute;
      left: 10px;
      top: 7px;
      font-size: 1.4em;
      opacity: 0.6;
    }
  }

  .page-menu__menu {
    overflow-x: auto;
  }

  .list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: $block-gap;
    margin-bottom: 2em;
  }

  .card {
    @extend %box-radius, %button-shadow;
    @include transition;

    position: relative;
    overflow: hidden;
    color: $c-font;

    &:hover {
      @extend %button-raised-shadow;
    }

    .img {
      @extend %video;

      background-size: cover;
      background-position: center;

      @include transition;
    }

    &:hover .img {
      opacity: 0.5;
    }

    .info {
      @extend %metal;

      display: block;
      padding: 6px 8px;
      border: $border;
      border-top: 0;
    }

    .title {
      font-weight: bold;
      display: block;
      height: 40px;
    }

    .reveal {
      @extend %metal;
      @include transition;
      @include backdrop-blur-if-transparent;

      position: absolute;
      top: 100%;
      width: 100%;
      height: fit-content;
      border-top: $border;
      z-index: 1;
      padding: 10px 10px 0 10px;
      opacity: 0;
    }

    &:hover .reveal {
      transform: translateY(-100%);
      opacity: 1;
    }

    .date {
      display: none;
    }

    .view {
      @extend %box-radius;

      position: absolute;
      top: 5px;
      left: 5px;
      z-index: 2;
      padding: 3px 5px;
      background: rgba(0, 0, 0, 0.7);
      color: #ddd;
      text-transform: uppercase;
      font-weight: bold;
    }

    .full-title {
      font-weight: bold;
      display: block;
    }

    .author {
      display: block;
      margin-bottom: 0.8em;
      opacity: 0.8;
    }

    .target {
      text-transform: uppercase;
      text-align: center;
      display: block;
      margin-bottom: 0.8em;
    }
  }

  .show {
    .embed {
      @extend %video, %box-radius-top;

      overflow: hidden;
      margin-bottom: 2em;
    }

    .meta {
      @extend %box-padding-horiz;

      padding-bottom: 10px;

      .target__wrapper {
        display: flex;
      }

      .target__box {
        text-transform: uppercase;
        margin: 0.4em 0 0.6em;
        padding: 2px 0.5em;
        border-radius: 4px;
        background: $c-bg-zebra;
      }

      .author {
        color: $c-font-dim;
        font-size: 1.5em;
        margin-right: 15px;
      }

      .tag {
        color: $c-font-dim;
        font-weight: bold;
        margin-right: 0.75em;
        display: inline-flex;
        align-items: center;

        &::before {
          margin-right: 0.25em;
        }
      }

      .author:hover,
      .tag:hover {
        color: $c-link;
      }

      .description {
        margin-top: 1em;
      }
    }
  }

  .subnav {
    text-transform: capitalize;

    a {
      @extend %flex-between;

      padding: 0.5em 0.8em;

      em {
        font-weight: bold;
        color: $c-font-dim;
        margin-left: 1em;

        @include mq-subnav-top {
          display: none;
        }
      }

      &.full span::before {
        content: '+';
        font-size: 1.2em;
        margin-right: 0.5em;
        font-weight: bold;
      }

      &.checked {
        @extend %box-radius-left;

        font-weight: bold;
        background: $c-bg-box;
        border-bottom: $border;

        span::before {
          content: '-';
        }

        @include mq-subnav-top {
          background: $c-accent;
          color: $c-over;
          text-shadow: none;
        }
      }

      &.empty {
        color: $c-font-dimmer;
        cursor: default;
      }

      &:hover span::before {
        color: $c-accent;
      }
    }
  }

  .under-tags {
    margin: 1em 0;
    text-align: center;
  }

  .tag-list {
    text-align: justify;

    a {
      @extend %box-radius;

      color: $c-font;
      display: inline-block;
      padding: 3px 5px;
      margin: 5px 5px;
      background: $c-bg-zebra;
      text-transform: capitalize;

      &:hover {
        @extend %button-shadow;

        background: $c-bg-box;
      }

      em {
        font-weight: bold;
        color: $c-accent;
      }
    }
  }

  #video {
    .not_much {
      margin-top: 100px;
      text-align: center;
    }

    .not_much.nb_0 {
      margin-top: 200px;
    }

    .explain {
      text-align: center;
      margin: 50px 0 35px 0;
    }
  }
}