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 }
  92
  93 .channel-select {
  94         .search-results-holder {
  95                 position: relative;
  96         }
  97         .search-results {
  98                 position: absolute;
  99                 left: 0;
 100                 top: 100%;
 101                 z-index: 1;
 102                 width: 100%;
 103                 border-top-left-radius: 0;
 104                 border-top-right-radius: 0;
 105                 box-shadow: 1ex 1ex 1ex rgba(0, 0, 0, 0.5);
 106         }
 107         &.collapsed .search-results {
 108                 display: none;
 109         }
 110         &.expanded .search-input {
 111                 border-bottom-left-radius: 0;
 112                 border-bottom-right-radius: 0;
 113         }
 114 }