Skip to content

Instantly share code, notes, and snippets.

@sabbir28

sabbir28/index.html

Created September 7, 2021 01:18
Show Gist options
  • Save sabbir28/cf3ef6fcc668e7271e4c2081bee2b73a to your computer and use it in GitHub Desktop.
Save sabbir28/cf3ef6fcc668e7271e4c2081bee2b73a to your computer and use it in GitHub Desktop.
Download ZIP
Media Player
Raw
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>
Raw
scripts
<script src="https://wvusstatic.com/gsap/v3/minified/gsap.min.js"></script>
Raw
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%;
}
Raw
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" />
@sabbir28
Copy link
Author

sabbir28 commented Sep 7, 2021

gg

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment