lila/ui/bits/css/_clas.scss

$c-clas: hsl(274, 47%, 62%);
$c-bg-clas-over: white;
$c-bg-clas-over-dim: $m-clas_white--mix-20;
$c-clas-light: mix($c-clas, #fff, 86%);

body {
  --bg-clas: linear-gradient(to right bottom, hsl(276, 29%, 49%), hsl(276, 65%, 32%), hsl(286, 37%, 21%));
  --bg-clas-title: linear-gradient(to right, hsl(252, 97%, 80%), hsl(276, 97%, 79%), hsl(234, 81%, 78%));

  @include if-light {
    --bg-clas: linear-gradient(to right bottom, hsl(276, 29%, 52%), hsl(276, 65%, 38%), hsl(286, 37%, 30%));
    --bg-clas-title: linear-gradient(to right, hsl(252, 97%, 86%), hsl(276, 97%, 84%), hsl(234, 81%, 83%));
  }
}

.button-empty {
  &.button-clas,
  &.button-clas:hover {
    color: $c-clas;
  }
}

%archived {
  @extend %flex-between;

  background: $c-bg-zebra2;
  padding: 1em 2em;
}

.page-menu__content.box {
  @extend %box-radius-force;
}

.subnav a {
  white-space: normal;
  max-width: 22vw;

  @include mq-topnav-visible {
    max-width: 15vw;
  }

  &.active {
    color: $c-clas;
  }

  &::after {
    background: $c-clas;
  }

  &.student {
    @extend %roboto;

    padding: 0.4rem 2vw 0.4rem 2rem;
    line-height: 1.2em;
  }
}

h1 {
  @extend %base-font;

  background-image: var(--bg-clas-title);
  background-clip: text;
  color: transparent;
  font-weight: bold;
}

.clas-index {
  .box__top {
    background: var(--bg-clas);

    & a {
      color: $c-bg-clas-over;
    }

    flex-flow: row nowrap;
  }

  .button.new {
    opacity: 0.8;

    &:hover {
      color: $c-over;
    }

    &::before {
      font-size: 3em;
    }
  }

  .classes {
    &__empty {
      margin-bottom: 8em;
    }

    .clas-widget {
      @extend %flex-center-nowrap, %break-word;
      @include transition;

      border-bottom: $border;
      padding: 2em var(---box-padding);
      position: relative;

      &::before {
        @include transition;

        color: $m-clas_bg--mix-80;
        font-size: 5em;
        margin-inline-end: 0.4em;

        @media (max-width: at-most($xx-small)) {
          display: none;
        }
      }

      &:hover {
        background: $m-clas_bg--mix-10;

        &::before {
          color: $c-clas;
        }
      }

      .overlay {
        @extend %link-overlay;
      }

      h3 {
        @include fluid-size('font-size', 23px, 35px);

        color: $c-clas;
      }

      p {
        margin: 0.5em 0 0 0;
      }

      &-archived {
        &::before,
        h3 {
          color: $c-font-dim;
        }
      }
    }
  }

  &__others {
    padding: $block-gap;
    text-align: right;
  }
}

.clas-show {
  @extend %box-neat-force;

  &__top {
    background: var(--bg-clas);

    &,
    a,
    .button {
      color: rgba(255, 255, 255, 0.7);
    }
  }

  &__overview {
    @extend %box-padding;

    background: $c-bg-zebra;

    &__manage {
      @extend %flex-between;
    }
  }

  &__archived {
    @extend %archived;
  }

  &__body {
    @extend %box-padding, %flex-column;

    gap: 3em;
  }

  &__actions {
    @extend %flex-between;
  }

  &__bulk {
    &__helps {
      margin-top: -2em;
    }

    &__help {
      @extend %box-radius;

      display: block;
      background: $c-bg-zebra2;
      margin-bottom: 1em;
      padding: 0.5em 1em;

      strong {
        color: $c-font-clear;
        line-height: 2em;
      }
    }
  }
}

.dashboard {
  .flash {
    margin: 2em;

    &__content {
      padding: 2em var(---box-padding);
    }
  }

  .students,
  .teachers {
    th {
      font-weight: bold;
    }

    .button {
      font-size: 1.2em;
      color: $m-font_clas--mix-40;
    }

    .user-link {
      @extend %flex-center;

      &:hover {
        color: $m-font_clas--mix-40;
      }

      span {
        pointer-events: none;
      }

      .line {
        font-size: 2em;
      }

      em {
        @extend %roboto;

        display: block;
      }
    }
  }

  .students {
    .rating {
      span {
        &::before {
          margin: 0;
        }

        margin: 0 0.3em;
      }
    }
  }

  &-nav {
    @extend %flex-center-nowrap;

    justify-content: center;
    align-items: flex-end;

    @media (max-width: at-most($xx-small)) {
      font-size: 0.9em;
    }

    a {
      @extend %box-radius-top;

      flex: 1 1 auto;
      text-align: center;
      padding: 1.2em 0 0.8em 0;

      &:first-child {
        @extend %box-radius-top-right;
      }

      &:last-child {
        @extend %box-radius-top-left;
      }

      &:hover {
        color: rgba(255, 255, 255, 0.8);
        background: rgba(0, 0, 0, 0.15);
      }

      &.active {
        background: $c-bg-box;
        color: $c-clas;
        font-weight: bold;

        .dashboard-teacher-overview &,
        .dashboard-teacher-progress & {
          background: $c-bg-zebra;
        }
      }
    }
  }

  &-student {
    .clas-show {
      &__top {
        @extend %box-padding-horiz;

        h1 {
          padding: 1.5em 0;
          margin: 0;
        }
      }

      &__desc {
        margin-top: -1.5em;
        padding-bottom: 3em;
      }
    }

    .clas-wall {
      max-height: 50vh;
      overflow-y: auto;
    }
  }

  &-teacher {
    .clas-show__top h1 {
      padding: 1.5em var(---box-padding);
      margin: 0;
    }

    .clas-show__desc {
      margin-bottom: 2em;
    }

    .progress {
      @extend %box-padding;

      background: $c-bg-zebra;

      > div {
        @extend %flex-center;

        &:first-child {
          margin-bottom: 1.5em;
        }
      }

      label {
        width: 12ch;
        display: inline-block;
        color: $c-font-dim;
        text-transform: uppercase;
      }

      &-choices {
        @extend %flex-center, %box-neat-force;

        @include if-not-light {
          box-shadow: none;
        }

        flex: 1 1 auto;
        background: $c-bg-box;
      }

      a {
        flex: 1 1 auto;
        text-align: center;
        font-weight: bold;
        padding: 0.7em;
        color: $c-clas;

        &:hover {
          background: $m-clas_bg--mix-30;
          color: $c-font-clear;
        }

        &.active {
          background: $m-clas_bg--mix-50;
          color: $c-over;
        }

        border-inline-end: $border;

        &:last-child {
          border: 0;
        }
      }
    }

    .students {
      td:first-child {
        font-weight: bold;
      }
    }

    .coords i {
      margin: 0 0.4em;

      &::before {
        margin-inline-end: 0.2em;
      }
    }
  }
}

.clas-tournaments {
  margin: $block-gap;
}

@keyframes target-fade {
  from {
    background: $m-accent_bg-popup--mix-80;
  }

  to {
    background: $m-accent_bg-popup--mix-15;
  }
}

.clas-edit {
  &__archive {
    text-align: right;
  }

  #clas-team:target {
    @extend %box-neat;

    padding: 1em 1em 1em 1.5em;
    border: 1px solid $c-accent;
    animation: target-fade 1.5s forwards;
  }
}

.button-clas {
  background: $m-clas_bg--mix-75;

  &:hover {
    background: $m-clas_bg--mix-90 !important;
  }
}

.clas-wall {
  @include rendered-markdown;

  margin: 4em 0;
  font-size: 1.1em;
  line-height: 1.6em;

  img {
    max-height: 40vh;
  }

  &__actions {
    @extend %flex-center-center;

    margin-top: 4em;

    .button {
      margin: 0 1em;
    }
  }

  &__edit {
    li {
      list-style: disc outside;
      margin: 0.5em 0 0 1.5em;
    }
  }
}

.student-show {
  padding-bottom: 3em;

  &__top {
    padding: calc(#{$box-padding-vert} - 1rem) var(---box-padding);
    background: var(--bg-clas);
    margin-bottom: 3em;

    &,
    a,
    a:hover,
    .title {
      color: $c-bg-clas-over;
    }

    a:not(.button) {
      font-weight: bold;
      border-bottom: 1px dotted $c-bg-clas-over-dim;
    }

    h1 {
      @extend %flex-center;

      margin-bottom: 0.6em;

      &::before {
        font-size: 2.5em;
        margin-inline-end: 0.4em;
      }

      strong {
        display: block;
      }

      em {
        @extend %roboto;
      }
    }

    &__meta {
      @extend %flex-between;

      justify-items: center;

      .button-empty {
        color: rgba(255, 255, 255, 0.7);

        &:hover {
          background: rgba(255, 255, 255, 0.1) !important;
          color: inherit;
        }
      }

      p {
        margin: 0;
      }
    }
  }

  &__notes {
    margin-bottom: 2em;
  }

  &__managed {
    @extend %box-radius, %flex-between;

    background: $m-primary--fade-80;
    padding: 1em 2em;
    margin: 1em 0 2em 0;

    p {
      margin: 0;

      &::before {
        @extend %data-icon;

        content: $licon-Shield;
        font-size: 3em;
      }
    }

    &__actions {
      @extend %flex-center;
    }
  }

  .activity {
    margin: 1em 0 2em 0;
  }

  &__archived {
    @extend %archived;
  }

  &__other-actions {
    @extend %flex-between;
  }

  &__password {
    .flash__content {
      @extend %flex-center;

      padding: 2em;

      &::before {
        font-size: 3em;
      }
    }

    pre {
      font-size: 1.5em;
    }
  }
}

.student-add {
  &__choice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
    gap: var(---box-padding);
    align-items: center;

    h2 {
      margin-bottom: 1em;
    }

    .button {
      width: 100%;
    }
  }

  &__or {
    color: $c-font-dimmer;
    margin: 2rem 0;
    text-align: center;
    font-style: italic;
    font-size: 2em;
  }

  &__created {
    strong a {
      text-decoration: underline;
    }

    p {
      margin-top: 1em;
    }

    pre {
      font-size: 1.5em;
    }

    .button {
      display: block;
      margin-top: 3em;
    }
  }
}

.student-add-many {
  form {
    margin-top: 2em;
  }
}

.student-edit {
  h2 {
    margin-bottom: 1em;
  }
}

.clas-home {
  background: var(--bg-clas);
  color: $c-bg-clas-over;

  &__doc {
    margin-bottom: 4em;
  }

  &__onboard {
    text-align: center;

    .button {
      margin-bottom: 2em;
      display: inline-block;
      background: $c-clas-light;
    }
  }

  &__login {
    @extend %flex-center-center;

    form {
      @extend %flex-center;

      align-items: stretch;

      input {
        @extend %box-radius-inline-start;

        font-size: 1.3em;
        font-family: monospace;
      }

      .button {
        @extend %box-radius-inline-end;

        background: $c-clas-light;
        padding: 0 1.5em;
        border-inline-start: 0;
      }

      @media (min-width: at-least($x-small)) {
        font-size: 1.5em;
      }
    }
  }
}

.clas-login {
  @extend %flex-column;

  gap: 2em;

  &__title {
    @extend %flex-between;
  }

  &__expiration {
    @extend %box-radius;

    background: $c-bg-zebra;
    font-size: 1.2em;
    padding: 0.3em 1em;

    .timeago {
      font-weight: bold;
      color: $c-font-clear;
    }
  }

  &__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1em;
  }

  &__card {
    @extend %box-neat, %flex-column;

    padding: 1em;
    background: $c-bg-zebra;
    border: $border;
    font-size: 1.5em;

    h3 {
      color: $c-font-clear;
    }

    a {
      font-size: 0.7em;
      color: $c-font-dim;
    }

    code {
      font-size: 1.8em;
      text-align: center;
      font-weight: bold;
      margin-top: 1rem;
      color: $c-font-dim;
    }

    i {
      font-size: 0.8em;
      color: $c-bad;
      text-align: center;
      margin-top: 1rem;
    }
  }
}

.textcomplete-dropdown {
  @extend %popup-shadow;

  background: $c-bg-popup;

  li {
    list-style: none;
    border-top: $border;
    padding: 0.5em;
    min-width: 100px;
    font-weight: bold;
    cursor: pointer;
  }

  li.textcomplete-header,
  li.textcomplete-footer {
    display: none;
  }

  li:hover,
  .active {
    background-color: $m-accent_bg-popup--mix-10;
  }

  a {
    color: $c-font;
  }
}