Media Player

index.html

<div class="media-controls">
  <div class="media-buttons">
    <button class="back-button media-button" label="back">
      <i class="fas fa-step-backward button-icons"></i>
      <span class="button-text milli">Back</span>
    </button>

    <button class="rewind-button media-button" label="rewind">
      <i class="fas fa-backward button-icons"></i>
      <span class="button-text milli">Rewind</span>
    </button>

    <button class="play-button media-button" label="play">
      <i class="fas fa-play button-icons delta"></i>
      <span class="button-text milli">Play</span>
    </button>

    <button class="fast-forward-button media-button" label="fast forward">

      <i class="fas fa-forward button-icons"></i>
      <span class="button-text milli">Forward</span>
    </button>

    <button class="skip-button media-button" label="skip">
      <i class="fas fa-step-forward button-icons"></i>
      <span class="button-text milli">Skip</span>
    </button>
  </div>
  <div class="media-progress">
    <div class="progress-bar-wrapper progress">
      <div class="progress-bar">
      </div>
    </div>
    <div class="progress-time-current milli">
      15:23
    </div>
    <div class="progress-time-total milli">
      34:40
    </div>
  </div>
</div>

media-player.markdown

Media Player

A Pen by Amy Carrigan on CodePen.

License.

scripts

<script src="https://wvusstatic.com/gsap/v3/minified/gsap.min.js"></script>

style.less

@wv-blue--lg-accessible: shade(@wv-blue, 6%);
@wv-orange--lg-accessible: shade(@wv-orange, 5%);
@wv-orange--sm-accessible: shade(@wv-orange, 22%);
@wv-lighter-orange: tint(@wv-orange, 85%);
@wv-lightest-orange: tint(@wv-orange, 92%);
@background-grey: tint(@wv-lightest-grey, 30%);
@background-yellow: tint(@wv-yellow, 85%);
@border-radius-xl: @spacer-xl;

// resets
button {
  padding: 0;
}

body {
  align-items: center;
  background-color: @background-yellow;
  // lightest gray that passes text contrast level AAA on @background-yellow background
  color: tint(@wv-charcoal, 16%);
  display: flex;
  height: 100vh;
  justify-content: center;
  position: relative;
  
  &:before {
    background: 
      no-repeat 23vw 30vh url("https://assets.codepen.io/518555/sparkles1.svg"),
      no-repeat right 25vw bottom 30vh url("https://assets.codepen.io/518555/sparkles4.svg"),
      no-repeat 40vw 30vh ~"/" 35vw url("https://assets.codepen.io/518555/blobStripe.svg");
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
  }
  
  &:after {
    background: no-repeat 25vw 40vh ~"/" 30vw url("https://assets.codepen.io/518555/blobSolid.svg");
    content: '';
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -2;
  }
}

.media-controls {
  align-items: center;
  background: tint(@background-yellow, 30%);
  border: 1px solid @wv-lightest-orange;
  border-radius: @border-radius-xl;
    // lightest gray that passes text contrast level AAA on lighter @background-yellow background
  color: tint(@wv-charcoal, 17%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: @spacer-xl;
  max-width: ~"calc(100% - @{spacer-xl} * 2)";
  padding: @spacer-xl;
  position: relative;
  
  &:after {
    border-radius: @border-radius-xl;
    box-shadow:
      0 2px 2px fade(@wv-orange, 25%),
      0 4px 4px fade(@wv-orange, 20%),
      0 8px 8px fade(@wv-orange, 15%),
      0 16px 16px fade(@wv-orange, 10%),
      0 24px 24px fade(@wv-orange, 5%);
    content: '';
    height: 100%;
    left: 0;
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
  }
}

.media-buttons {
  display: flex;
  flex-wrap: nowrap;
}

.media-button {
  background-color: transparent;
  border: none;
  align-items: center;
  border-radius: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  text-align: center;
  
  @media (min-width: 421px) {
    padding: @spacer-tight;
  }
}

.button-icons {
  background-color: @wv-orange-40;
  border-radius: 100%;
  margin-bottom: @spacer-xxs;
  margin-top: auto;
  padding: @spacer-base;
}

.back-button,
.skip-button {
  .button-icons {
    background-color: transparent;
    // Lightest gray that passes icon contrast on @background-yellow background
    color: tint(@wv-dark-grey, 28%);
  }
}

.rewind-button,
.fast-forward-button {
  .button-icons {
    background: linear-gradient(to bottom left, @background-yellow, @wv-orange-20);
    // Lightest gray that passes icon contrast on @wv-orange-40 background
    color: tint(@wv-dark-grey, 19%);
  }
}

.play-button {
  .button-icons {
    background: linear-gradient(to bottom left, @wv-white, @background-yellow);
    border: 1px solid @wv-lightest-orange;
    box-shadow: 
      -1px 1px 1px fade(@wv-orange-40, 25%),
      1px -1px 1px fade(@wv-white, 25%),
      -2px 2px 2px fade(@wv-orange-40, 20%),
      2px -2px 2px fade(@wv-white, 20%),
      -4px 4px 4px fade(@wv-orange-40, 15%),
      4px -4px 4px fade(@wv-white, 15%),
      -8px 8px 8px fade(@wv-orange-40, 10%),
      8px -8px 8px fade(@wv-white, 10%),
      -16px 16px 16px fade(@wv-orange-40, 5%),
      16px -16px 16px fade(@wv-white, 5%);
    color: @wv-orange--lg-accessible;
    margin-bottom: @spacer-xs;
    padding: @spacer-xl;
  }
}

.button-text {
  margin-top: auto;
}

.media-progress {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.progress-bar-wrapper {
  background-color: transparent;
  border-radius: @spacer-tight;
  box-shadow: 
      inset -1px 1px 1px fade(@wv-orange-40, 25%),
      inset 1px -1px 1px fade(@wv-white, 25%),
      inset -2px 2px 2px fade(@wv-orange-40, 20%),
      inset 2px -2px 2px fade(@wv-white, 20%),
      inset -4px 4px 4px fade(@wv-orange-40, 15%),
      inset 4px -4px 4px fade(@wv-white, 15%),
      inset -8px 8px 8px fade(@wv-orange-40, 10%),
      inset 8px -8px 8px fade(@wv-white, 10%),
      inset -16px 16px 16px fade(@wv-orange-40, 5%),
      inset 16px -16px 16px fade(@wv-white, 5%);
  height: @spacer-tight;
  margin-bottom: @spacer-xs;
  margin-top: @spacer-xl;
  position: relative;
  width: 100%;
}

.progress-bar {
  background: linear-gradient(to right, @wv-yellow, @wv-orange);
  border-radius: @spacer-tight;
  box-shadow: none;
  height: @spacer-tight;
  width: 44%;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://wvus-ibu.github.io/swing/css/style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&amp;family=Lora:ital@0;1&amp;display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<link href="https://codepen.io/amy_e_carrigan/pen/53a420ad108d650c30efd8fa7e46f618" rel="stylesheet" />

gg