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         .player-link {
  40                 border: none;
  41
  42                 img {
  43                         max-height: 3rem;
  44                         width: auto;
  45                         border-radius: 50%;
  46                         margin: 0 0.5rem 0 0;
  47                 }
  48                 span {
  49                         vertical-align: middle;
  50                 }
  51         }
  52
  53         .crew-member {
  54                 border: none;
  55
  56                 img {
  57                         max-height: 2rem;
  58                         width: auto;
  59                         border-radius: 50%;
  60                         margin: 0 0.25rem 0 0;
  61                 }
  62                 span {
  63                         vertical-align: middle;
  64                 }
  65
  66                 &.unconfirmed {
  67                         opacity: 0.25;
  68                         &:hover {
  69                                 opacity: 1;
  70                         }
  71                 }
  72         }
  73 }