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         .episode-channel-links > * {
  26                 margin: 0.5ex 0;
  27                 &:first-child {
  28                         margin-top: 0;
  29                 }
  30                 &:last-child {
  31                         margin-bottom: 0;
  32                 }
  33         }
  34         .episode-players {
  35                 display: grid;
  36                 grid-template-columns: 1fr 1fr;
  37         }
  38
  39         .event-link {
  40                 color: inherit;
  41                 text-decoration: none;
  42                 &:hover {
  43                         color: $link-color;
  44                         text-decoration: underline;
  45                 }
  46         }
  47         .player-link {
  48                 border: none;
  49
  50                 img {
  51                         max-height: 3rem;
  52                         width: auto;
  53                         border-radius: 50%;
  54                         margin: 0 0.5rem 0 0;
  55                 }
  56                 span {
  57                         vertical-align: middle;
  58                 }
  59         }
  60 }
  61
  62 .crew-member {
  63         border: none;
  64
  65         img {
  66                 max-height: 2rem;
  67                 width: auto;
  68                 border-radius: 50%;
  69                 margin: 0 0.25rem 0 0;
  70         }
  71         span {
  72                 vertical-align: middle;
  73         }
  74
  75         &.unconfirmed {
  76                 opacity: 0.25;
  77                 &:hover {
  78                         opacity: 1;
  79                 }
  80         }
  81 }