resources/sass/episodes.scss

   1 .episodes-group-heading {
   2         position: sticky;
   3         top: 0;
   4         margin: 2rem 0 0 0;
   5         padding: 1rem 0 3rem 0;
   6         background: $body-bg;
   7         background: linear-gradient(180deg, $body-bg, $body-bg 65%, transparent);
   8         z-index: 1;
   9 }
  10
  11 .episodes-item {
  12         background-size: 6rem auto;
  13         background-repeat: no-repeat;
  14         background-position: left bottom;
  15         min-height: 8rem;
  16
  17         &.is-active {
  18                 border-color: $success !important;
  19                 box-shadow: 0 0 0.25rem 0.25rem $success;
  20         }
  21
  22         .episode-start {
  23                 width: 4rem;
  24         }
  25         @include media-breakpoint-up(md) {
  26                 .episode-body {
  27                         margin-left: 5rem;
  28                 }
  29         }
  30         .episode-channel-links > * {
  31                 margin: 0.5ex 0;
  32                 &:first-child {
  33                         margin-top: 0;
  34                 }
  35                 &:last-child {
  36                         margin-bottom: 0;
  37                 }
  38         }
  39         .episode-players {
  40                 display: grid;
  41                 grid-template-columns: 1fr 1fr;
  42         }
  43         @include media-breakpoint-down(md) {
  44                 .episode-event {
  45                         margin-left: 5rem;
  46                 }
  47         }
  48
  49         .event-link {
  50                 color: inherit;
  51                 text-decoration: none;
  52                 &:hover {
  53                         color: $link-color;
  54                         text-decoration: underline;
  55                 }
  56         }
  57         .player-link {
  58                 border: none;
  59
  60                 img {
  61                         max-height: 3rem;
  62                         width: auto;
  63                         border-radius: 50%;
  64                         margin: 0 0.5rem 0 0;
  65                 }
  66                 span {
  67                         vertical-align: middle;
  68                 }
  69         }
  70 }
  71
  72 .crew-member {
  73         border: none;
  74
  75         img {
  76                 max-height: 2rem;
  77                 width: auto;
  78                 border-radius: 50%;
  79                 margin: 0 0.25rem 0 0;
  80         }
  81         span {
  82                 vertical-align: middle;
  83         }
  84
  85         &.unconfirmed {
  86                 opacity: 0.25;
  87                 &:hover {
  88                         opacity: 1;
  89                 }
  90         }
  91 }