browser.scss

// vars
$color-base-1: #2E2F40;
$color-base-2: rgba($color-base-1, 0.4);
$color-base-3: rgba($color-base-1, 0.3);
$color-base-4: rgba($color-base-1, 0.2);
$color-base-5: rgba($color-base-1, 0.1);
$color-base-6: rgba($color-base-1, 0.05);

$color-accent-1: #20A6FC;
$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

// reset the basics
html {
  font-family: $font-stack !important;
}

body {
  background: #fff;
  padding: 0 !important;
  color: $color-base-1 !important;
  max-width: 100% !important;
  font-size: 14px !important;

  &.page_podcasts {
    padding-top: 90px !important;
  }

  * {
    font-family: $font-stack !important;
    box-sizing: border-box;
  }

  *, body, button, input, textarea, select {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .smallcaps,
  .navlink,
  .ocbutton,
  .ocborderedbutton,
  .ocsegmentedbutton,
  .caption2 {
    text-transform: none;
  }

  .caption2 {
    // font-size: 17px !important;
  }

  .margintop1,
  .margintop05 {
    margin-top: 0 !important;
  }

  .titlestack {
    top: 0;
    transform: translateY(0%) !important;
    max-height: auto;
  }

  h2.centertext,               // channel name (one of two...) on channel page
  .nav,                        // top navigation
  .pure-u-1-5,                 // side spacers (spacer.gif!)
  .content.pure-u-1 .pure-u-1-4, // spacer on login page
  .footer.l-box.is-center,     // footer with some copy info
  #speedcontrols,              // speed control
  .destructivebutton,          // "delete" button from active podcast
  #progressbar #timeelapsed,
  #progressbar #timeremaining,
  .ocseparatorbar,             // headings on /podcasts
  #episode_body,               // episode description
  // .centertext.lighttext.marginbottom1,                  // "all podcast" on single podcast screen
  .new_episode_for_user,                                // "save episode" on single episode screen
  .centertext.lighttext.marginbottom1.margintopneg1,    // hopefully this is only the "back to podcasts" link on single podcast page
  .centertext.margintop1.existing_episode_for_user,     // episodes action
  #speedcontrols + div .centertext.lighttext.margintop1 // permalink, share ...
  {
    display: none;
  }

  // div containing a nbsp ...
  // can't just hide it because it'll target other screens
  .centertext.lighttext.marginbottom1 + div {
    position: absolute;
    top: 0;
  }

  .centertext.lighttext.marginbottom1 {
    position: absolute;
    top: 10px;
    right: 10px;
    color: $color-base-3;
  }

  .art {
    border: none;
  }

  a {
    color: inherit !important;
  }

  // temp selector
  .pure-u-1.pure-u-sm-3-5 {
    position: relative;
  }

  // temp selector
  .container.pure-g {
    // padding-top: 220px;
  }

  .fullart_container {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;

    img,
    .backgroundart {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
    }

    .art { // the actual image
      width: 160px;
      top: 60px;
      overflow: hidden;
      border-radius: 3px;
      z-index: 40;
      transition: transform 0.3s;
      margin-left: calc(50% - 80px);

      &.playing,
      &.playing + .shadowart {
        transform: scale(1.1);
      }
    }

    .shadowart {
      width: 140px;
      filter: blur(12px) brightness(110%);
      top: 82px;
      z-index: 10;
      transition: transform 0.3s;
      margin-left: calc(50% - 70px);
    }

    .backgroundart {
      width: 100%;
      position: fixed;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 0 100%;
      filter: opacity(6%) saturate(0%);
      height: 220px;
      z-index: 1;

      &:after {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        display: block;
        height: 100%;
        width: 100%;
        background-image: linear-gradient(to top, rgba(#fff, 1), rgba(#fff, 0));
      }
    }
  }

  // title container on single podcast
  .titlestack,
  .centertext.lighttext.marginbottom1 + .titlestack { // hack because of `.centertext.lighttext.marginbottom1 + div`
    position: absolute;
    top: 265px;
    width: 100%;

    div {
      margin: 0;
    }

    // container for the podcast title
    .caption2.singleline {
      color: $color-base-2;

      .ocbutton {
        font-size: 14px;
      }
    }

    // title of the episode
    .title {
      font-size: 18px;
      padding-top: 7px;
    }
  }

  .cellcontent .titlestack {
    position: relative;
    top: auto;

    .title {
      font-size: 14px;
      padding-top: 0;
    }
  }

  #progressbar {
    margin-top: 0;
    position: absolute;
    top: 400px;
    left: 0;
    width: 100%;
    padding: 0 30px;
  }

  #progressslidercontainer {

    .progresssliderloadedrange {
      height: 4px;
      border-radius: 10px;
      background: $color-base-6;
      opacity: 1;
    }
  }

  #progresssliderbackground {
    height: 4px;
    border: none;
    background: $color-base-6;
    border-radius: 10px;
  }

  #progresssliderbackground::-webkit-progress-value {
    background: $color-accent-1;
    border-radius: 10px;
  }

  #progressslider::-webkit-slider-thumb {
    border-radius: 10px;
    background: #fff;
    height: 16px;
    width: 16px;
    box-shadow: 0 0 1px $color-base-2, 0 4px 10px $color-base-5;
    margin-top: -6px;
    transition: all 0.3s;

    &:hover {
      box-shadow: 0 0 1px $color-base-2, 0 4px 10px $color-base-3;
    }
  }

  #playcontrols_container {
    margin: 0;
    position: absolute;
    top: 435px;
    left: 0;
    width: 100%;

    #playcontrols {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    #seekbackbutton,
    #seekforwardbutton,
    #playpausebutton {
      display: inline-block;
      position: relative;
      width: 32px;
      margin: 0 10px;
      left: auto;
      right: auto;
      transition: transform 0.15s;

      svg {
        position: relative;
        width: 32px;
        padding: 0;
      }

      &:active {
        transform: scale(0.9);
      }
    }

    #playpausebutton {
      border: solid 1px $color-base-5;
      border-radius: 60px;
      height: 60px;
      width: 60px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }

  // top-most episode container from episodes list in podcast channel
  .extendedepisodecell {
    padding: 0;
    margin: 17px 30px;

    .title {
      color: $color-base-1;
    }

    .titlestack {

      // time date
      .caption2.singleline {
        font-size: 12px;
        padding: 4px 0 0;
        color: $color-base-3;
      }

      // description
      .lighttext.margintop05 {
        color: $color-base-2;
        font-size: 13px;
        padding: 4px 0 0;
        display: none;
      }
    }

    // new episode
    &.usernewepisode {
      .title {
        color: $color-base-1;

        &:after {
          content: "Unplayed";
          background: $color-accent-1;
          color: #fff;
          padding: 1px 3px;
          font-size: 10px;
          text-transform: uppercase;
          border-radius: 2px;
          margin-left: 6px;
        }
      }
    }
  }

  // top-most unaired episode container on main list
  .episodecell {
    padding: 5px 10px;
    height: 70px;
    position: relative;
    background: inherit;
    display: none;

    &.visible {
      display: block;
    }

    &:hover {
      .art {
        transform: scale(1.1);
      }
    }

    .art {
      top: 5px;
      left: 10px;
      height: 60px;
      width: 60px;
      overflow: hidden;
      border-radius: 3px;
      transform: scale(1);
      transition: transform 0.25s;
    }

    .cellcontent {
      position: relative;
      left: 75px;
      top: 0;
      height: auto;
      width: calc(100% - 75px);
      float: left;
    }

    .title {
      color: $color-base-1;
    }

    .titlestack {

      // time date
      .caption2.singleline {
        font-size: 14px;
        padding: 0 0 4px;
        color: $color-base-3;
      }

      .title.singleline + .caption2.singleline {
        font-size: 12px;
        padding: 4px 0 0;
      }
    }

  }

  // top-most channel container on main list
  .feedcell {
    width: 33%;
    padding: 0 0 30px;
    float: left;
    display: none;
    height: auto;
    text-align: center;

    &.visible {
      display: block;
    }

    &:hover {
      .art {
        transform: scale(1.1);
      }
    }

    .art {
      position: relative;
      top: 0;
      left: 0;
      height: 60px;
      width: 60px;
      overflow: hidden;
      border-radius: 3px;
      transform: scale(1);
      transition: transform 0.25s;
      display: inline-block;
    }

    .cellcontent {
      position: relative;
      left: 0;
      top: 0;
      margin-top: 6px;
      width: 100%;
      text-align: center;
    }

    .title {
      color: $color-base-1;
      font-size: 12px !important;
    }
  }

  .feedcell:hover,
  .episodecell:hover,
  .extendedepisodecell:hover {
    background: none;
  }

  .mainListTabs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(#fff, 0.85);
    padding: 30px 0 0;
    height: 90px;
    margin: 0;
    text-align: center;
    font-size: 0;
    -webkit-app-region: drag;
    backdrop-filter: blur(6px);

    li {
      padding: 0;
      margin: 0;
      list-style: none;
      display: inline-block;

      &:first-child a {
        border-radius: 4px 0 0 4px;
      }

      &:last-child a {
        border-radius: 0 4px 4px 0;
      }
    }

    a {
      border: solid 1px $color-accent-1;
      color: $color-accent-1 !important;
      text-decoration: none;
      padding: 7px 12px;
      margin: 0;
      display: inline-block;
      outline: none;
      font-size: 13px;

      &.active {
        color: #fff !important;
        background: $color-accent-1;
      }
    }
  }

  // podcast name on the channel page
  h2.margintop05.marginbottom0 {
    text-align: center;
    font-size: 18px;
    padding-top: 265px;

    // provider url
    & + .margintop0.caption2 {
      text-align: center;
      font-size: 14px;
      color: $color-base-2;
      padding-top: 7px;

      // channel description
      & + .margintop1.marginbottom1.lighttext {
        color: $color-base-1;
        font-size: 12px;
        text-align: center;
        margin: 0 30px;
        padding: 13px 30px 30px;

        border-bottom: solid 1px $color-base-5;
      }
    }
  }

  // login form
  form.pure-form.pure-form-stacked {
    width: 340px;
    margin: 20% auto 0;

    .pure-input-1 {
      border: none;
      border-bottom: solid 1px $color-accent-1;
      border-radius: 0;
      padding: 8px 0;
      box-shadow: none;
      margin-bottom: 25px;
    }

    // forgot password link
    .ocbutton.margintop1.right.attachsubmit {
      color: $color-accent-1;
    }

    .ocborderedbutton {
      border-radius: 50px;
      border: none;
      background: $color-accent-1;
      color: #fff;
      padding: 12px 30px;
    }
  }
}