|
@charset "UTF-8"; |
|
/* #DaftPunKonsole |
|
* Malik Dellidj - @Dathink |
|
* |
|
* There are existing apps or flash to do this, but no web version so here it is. |
|
* |
|
* How to play : |
|
* You may notice that in the song all theses words are used |
|
* but sometimes in a different layout |
|
* e.g. |
|
* – Work it, make it, do it, makes us |
|
* – Harder, better, faster, stronger |
|
* ––– |
|
* – Work it, harder, make it, better |
|
* – Do it, faster, makes us, stronger |
|
* |
|
* Check the lyrics ! and the different tones to recreate over half of the song ! |
|
* |
|
* Many thanks to my work mates who helped me when I was stuck |
|
* |
|
* Nb : Hey IE fellaz, get a browser : www.google.com/chrome, it's free ! |
|
*/ |
|
html, body { |
|
height: 100vh; |
|
width: 100vw; |
|
} |
|
|
|
body { |
|
font: normal 1em/1.45em "Helvetica Neue", Helvetica, Arial, sans-serif; |
|
background: url(https://s.cdpn.io/190177/Daft_Punk_bg.svg) no-repeat center center #101012; |
|
display: flex; |
|
align-items: center; |
|
flex-direction: column; |
|
justify-content: space-around; |
|
-webkit-font-smoothing: antialiased; |
|
color: #ffffff; |
|
-webkit-font-smoothing: subpixel-antialiased; |
|
text-rendering: optimizeLegibility; |
|
background-size: 95%; |
|
} |
|
|
|
a { |
|
text-decoration: none; |
|
color: #404048; |
|
} |
|
|
|
.extra { |
|
color: #15d880; |
|
} |
|
|
|
.lyrics { |
|
flex: 1; |
|
align-items: center; |
|
justify-content: center; |
|
display: flex; |
|
font-size: 3.625rem; |
|
position: relative; |
|
} |
|
.lyrics span { |
|
-webkit-animation-duration: 1s; |
|
animation-duration: 1s; |
|
white-space: nowrap; |
|
font-weight: 500; |
|
} |
|
.Normal .lyrics span { |
|
color: #15d880; |
|
text-shadow: 0 0 0.625rem rgba(21, 216, 128, 0.2); |
|
} |
|
.High .lyrics span { |
|
color: #d43f57; |
|
text-shadow: 0 0 0.625rem rgba(212, 63, 87, 0.2); |
|
} |
|
.Low .lyrics span { |
|
color: #dfba69; |
|
text-shadow: 0 0 0.625rem rgba(223, 186, 105, 0.2); |
|
} |
|
|
|
.wk { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
flex: 2; |
|
} |
|
|
|
.k { |
|
width: 39.375rem; |
|
padding-right: 2.5%; |
|
-webkit-user-select: none; |
|
-moz-user-select: none; |
|
-ms-user-select: none; |
|
user-select: none; |
|
-webkit-tap-highlight-color: transparent; |
|
-webkit-tap-highlight-color: transparent; |
|
} |
|
.k .r { |
|
position: relative; |
|
display: flex; |
|
justify-content: space-between; |
|
margin: 0.625rem; |
|
} |
|
.k .r:nth-child(1) i:nth-last-child(-n+4), .k .r:nth-child(1) i:nth-child(-n+4), .k .r:nth-child(2) i:nth-last-child(-n+4), .k .r:nth-child(2) i:nth-child(-n+4) { |
|
color: #b3b3bb; |
|
} |
|
.k .r:nth-child(1) i:nth-last-child(-n+4):hover, .k .r:nth-child(1) i:nth-child(-n+4):hover, .k .r:nth-child(2) i:nth-last-child(-n+4):hover, .k .r:nth-child(2) i:nth-child(-n+4):hover { |
|
color: #15d880; |
|
border-color: #15d880; |
|
} |
|
.k .r:nth-child(1) i:nth-last-child(-n+4):active, .k .r:nth-child(1) i:nth-last-child(-n+4).is-active, .k .r:nth-child(1) i:nth-child(-n+4):active, .k .r:nth-child(1) i:nth-child(-n+4).is-active, .k .r:nth-child(2) i:nth-last-child(-n+4):active, .k .r:nth-child(2) i:nth-last-child(-n+4).is-active, .k .r:nth-child(2) i:nth-child(-n+4):active, .k .r:nth-child(2) i:nth-child(-n+4).is-active { |
|
color: #15d880; |
|
border-color: #15d880; |
|
box-shadow: 0 0 0.75rem -0.125rem #15d880; |
|
} |
|
.Normal .k .r:nth-child(1) i:nth-last-child(-n+4), .Normal .k .r:nth-child(1) i:nth-child(-n+4), .Normal .k .r:nth-child(2) i:nth-last-child(-n+4), .Normal .k .r:nth-child(2) i:nth-child(-n+4) { |
|
color: #b3b3bb; |
|
} |
|
.Normal .k .r:nth-child(1) i:nth-last-child(-n+4):hover, .Normal .k .r:nth-child(1) i:nth-child(-n+4):hover, .Normal .k .r:nth-child(2) i:nth-last-child(-n+4):hover, .Normal .k .r:nth-child(2) i:nth-child(-n+4):hover { |
|
color: #15d880; |
|
border-color: #15d880; |
|
} |
|
.Normal .k .r:nth-child(1) i:nth-last-child(-n+4):active, .Normal .k .r:nth-child(1) i:nth-last-child(-n+4).is-active, .Normal .k .r:nth-child(1) i:nth-child(-n+4):active, .Normal .k .r:nth-child(1) i:nth-child(-n+4).is-active, .Normal .k .r:nth-child(2) i:nth-last-child(-n+4):active, .Normal .k .r:nth-child(2) i:nth-last-child(-n+4).is-active, .Normal .k .r:nth-child(2) i:nth-child(-n+4):active, .Normal .k .r:nth-child(2) i:nth-child(-n+4).is-active { |
|
color: #15d880; |
|
border-color: #15d880; |
|
box-shadow: 0 0 0.75rem -0.125rem #15d880; |
|
} |
|
.High .k .r:nth-child(1) i:nth-last-child(-n+4), .High .k .r:nth-child(1) i:nth-child(-n+4), .High .k .r:nth-child(2) i:nth-last-child(-n+4), .High .k .r:nth-child(2) i:nth-child(-n+4) { |
|
color: #b3b3bb; |
|
} |
|
.High .k .r:nth-child(1) i:nth-last-child(-n+4):hover, .High .k .r:nth-child(1) i:nth-child(-n+4):hover, .High .k .r:nth-child(2) i:nth-last-child(-n+4):hover, .High .k .r:nth-child(2) i:nth-child(-n+4):hover { |
|
color: #d43f57; |
|
border-color: #d43f57; |
|
} |
|
.High .k .r:nth-child(1) i:nth-last-child(-n+4):active, .High .k .r:nth-child(1) i:nth-last-child(-n+4).is-active, .High .k .r:nth-child(1) i:nth-child(-n+4):active, .High .k .r:nth-child(1) i:nth-child(-n+4).is-active, .High .k .r:nth-child(2) i:nth-last-child(-n+4):active, .High .k .r:nth-child(2) i:nth-last-child(-n+4).is-active, .High .k .r:nth-child(2) i:nth-child(-n+4):active, .High .k .r:nth-child(2) i:nth-child(-n+4).is-active { |
|
color: #d43f57; |
|
border-color: #d43f57; |
|
box-shadow: 0 0 0.75rem -0.125rem #d43f57; |
|
} |
|
.Low .k .r:nth-child(1) i:nth-child(-n+4), .Low .k .r:nth-child(2) i:nth-child(-n+4) { |
|
color: #404048; |
|
} |
|
.Low .k .r:nth-child(1) i:nth-child(-n+4):hover, .Low .k .r:nth-child(2) i:nth-child(-n+4):hover { |
|
color: #70707e; |
|
border-color: #70707e; |
|
} |
|
.Low .k .r:nth-child(1) i:nth-child(-n+4):active, .Low .k .r:nth-child(1) i:nth-child(-n+4).is-active, .Low .k .r:nth-child(2) i:nth-child(-n+4):active, .Low .k .r:nth-child(2) i:nth-child(-n+4).is-active { |
|
color: #70707e; |
|
border-color: #70707e; |
|
box-shadow: 0 0 0.75rem -0.125rem #70707e; |
|
} |
|
.Low .k .r:nth-child(1) i:nth-last-child(-n+4), .Low .k .r:nth-child(2) i:nth-last-child(-n+4) { |
|
color: #b3b3bb; |
|
} |
|
.Low .k .r:nth-child(1) i:nth-last-child(-n+4):hover, .Low .k .r:nth-child(2) i:nth-last-child(-n+4):hover { |
|
color: #dfba69; |
|
border-color: #dfba69; |
|
} |
|
.Low .k .r:nth-child(1) i:nth-last-child(-n+4):active, .Low .k .r:nth-child(1) i:nth-last-child(-n+4).is-active, .Low .k .r:nth-child(2) i:nth-last-child(-n+4):active, .Low .k .r:nth-child(2) i:nth-last-child(-n+4).is-active { |
|
color: #dfba69; |
|
border-color: #dfba69; |
|
box-shadow: 0 0 0.75rem -0.125rem #dfba69; |
|
} |
|
.k .r:nth-child(2) { |
|
-webkit-transform: translateX(2.5%); |
|
transform: translateX(2.5%); |
|
} |
|
.k .r:nth-child(3) { |
|
margin-left: 8.5%; |
|
margin-right: 14%; |
|
} |
|
.Normal .k .r:nth-child(3) i:nth-child(1) { |
|
color: #15d880; |
|
border-color: #15d880; |
|
box-shadow: 0 0 0.75rem -0.125rem #15d880; |
|
} |
|
.Normal .k .r:nth-child(3) i:nth-child(1) b { |
|
background: #15d880; |
|
} |
|
.High .k .r:nth-child(3) i:nth-child(2) { |
|
color: #d43f57; |
|
border-color: #d43f57; |
|
box-shadow: 0 0 0.75rem -0.125rem #d43f57; |
|
} |
|
.High .k .r:nth-child(3) i:nth-child(2) b { |
|
background: #d43f57; |
|
} |
|
.Low .k .r:nth-child(3) i:nth-last-child(3) { |
|
color: #dfba69; |
|
border-color: #dfba69; |
|
box-shadow: 0 0 0.75rem -0.125rem #dfba69; |
|
} |
|
.Low .k .r:nth-child(3) i:nth-last-child(3) b { |
|
background: #dfba69; |
|
} |
|
.k .r:nth-child(3) i { |
|
flex-direction: column-reverse; |
|
} |
|
.k .r:nth-child(3) i b { |
|
background: #404048; |
|
color: #101012; |
|
border-radius: 0.5rem; |
|
padding: 0 0.3125rem; |
|
line-height: 0; |
|
margin-top: 0.3125rem; |
|
} |
|
.k i, .k .space { |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
color: #404048; |
|
border-radius: 0.375rem; |
|
height: 3.0625rem; |
|
font-size: 1rem; |
|
line-height: 0; |
|
border: 0.125rem solid #404048; |
|
position: relative; |
|
transition: all 0.08s ease-in-out; |
|
} |
|
.k i:hover, .k .space:hover { |
|
border-color: #70707e; |
|
color: #70707e; |
|
} |
|
.k i:active, .k i.is-active, .k .space:active, .k .space.is-active { |
|
border-color: #70707e; |
|
color: #70707e; |
|
box-shadow: 0 0 0.5625rem -0.125rem #70707e; |
|
-webkit-transform: translateY(0.0625rem); |
|
transform: translateY(0.0625rem); |
|
} |
|
.k i { |
|
font-style: normal; |
|
width: 3.0625rem; |
|
} |
|
.k i span, .k i b { |
|
flex: 2; |
|
display: flex; |
|
align-items: center; |
|
} |
|
.k i span { |
|
text-transform: uppercase; |
|
font-family: "Varela Round"; |
|
} |
|
.k i b { |
|
font-size: 0.5625rem; |
|
flex: 1; |
|
} |
|
.k .space { |
|
flex: 1; |
|
max-width: 48.5%; |
|
margin-left: 27.5%; |
|
align-items: stretch; |
|
justify-content: center; |
|
position: static; |
|
} |
|
|
|
.credits { |
|
font-size: 0.8125rem; |
|
display: flex; |
|
flex-direction: column; |
|
flex: 1; |
|
justify-content: center; |
|
} |
|
.credits p { |
|
text-align: center; |
|
} |
|
.credits .links { |
|
margin: 0.3125rem 0; |
|
} |
|
.credits .links li { |
|
display: inline-block; |
|
padding: 0 0.625rem; |
|
border-right: 0.0625rem solid rgba(64, 64, 72, 0.35); |
|
} |
|
.credits .links li:last-child { |
|
border: 0; |
|
} |
|
|
|
.fa { |
|
color: #15d880; |
|
} |
|
.fa + a { |
|
color: #15d880; |
|
} |
|
.fa + a:hover { |
|
color: #15d880; |
|
} |
|
|
|
.fa-heart { |
|
color: #d43f57; |
|
} |
|
|
|
.jp-audio { |
|
color: #ffffff; |
|
} |
|
|
|
.modal { |
|
display: flex; |
|
background: rgba(16, 16, 18, 0.8); |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
align-items: center; |
|
justify-content: center; |
|
flex-direction: column; |
|
} |
|
.modal .daft-punk-logo { |
|
margin: 1.25rem 0 1.875rem; |
|
} |
|
.modal .btn { |
|
color: #0c7b49; |
|
border: 0.125rem solid #0c7b49; |
|
padding: 0.625rem 1.25rem; |
|
border-radius: 3.125rem; |
|
transition: margin 0.3s ease; |
|
} |
|
.modal .btn:hover { |
|
color: #0c7b49; |
|
border-color: #0c7b49; |
|
box-shadow: 0 0 0.75rem -0.125rem #0c7b49; |
|
text-shadow: 0 0 0.25rem rgba(12, 123, 73, 0.8); |
|
} |
|
.modal h1 { |
|
font-size: 2.5rem; |
|
font-weight: 100; |
|
margin: 0 0 1.875rem 0; |
|
} |
|
.modal h2 { |
|
font-size: 1.25rem; |
|
font-weight: 200; |
|
margin: 0 0 1.875rem 0; |
|
} |
|
.modal h2 a { |
|
color: #15d880; |
|
} |
|
.modal h2 a:hover { |
|
text-shadow: 0 0 0.1875rem rgba(21, 216, 128, 0.8); |
|
} |
|
.modal ul { |
|
display: flex; |
|
} |
|
.modal ul li { |
|
margin: 1.25rem; |
|
} |
|
.modal .fa { |
|
color: #15d880; |
|
} |
|
.modal .fa + a { |
|
color: #ffffff; |
|
} |
|
.modal .fa + a:hover { |
|
color: #15d880; |
|
} |
|
.modal .credit { |
|
margin: 1.25rem 0 0 0; |
|
} |
|
|
|
.jp-audio { |
|
position: relative; |
|
} |
|
.jp-audio .jp-controls { |
|
position: absolute; |
|
} |
|
.jp-audio .jp-controls button { |
|
background: transparent; |
|
border: 0; |
|
color: #70707e; |
|
text-transform: capitalize; |
|
font-size: 0.5625rem; |
|
} |
|
.jp-audio .jp-controls .jp-play:before { |
|
content: ""; |
|
height: 0.3125rem; |
|
width: 0.3125rem; |
|
border-radius: 3.125rem; |
|
background: #70707e; |
|
display: inline-block; |
|
margin: 0.0625rem 0.1875rem; |
|
} |
|
.jp-audio.jp-state-playing .jp-controls .jp-play { |
|
color: #15d880; |
|
text-shadow: 0 0 0.125rem rgba(21, 216, 128, 0.8); |
|
} |
|
.jp-audio.jp-state-playing .jp-controls .jp-play:before { |
|
background: #15d880; |
|
box-shadow: 0 0 0.1875rem rgba(21, 216, 128, 0.8); |
|
} |
|
.High .jp-audio.jp-state-playing .jp-controls .jp-play { |
|
color: #d43f57; |
|
text-shadow: 0 0 0.125rem rgba(212, 63, 87, 0.8); |
|
} |
|
.High .jp-audio.jp-state-playing .jp-controls .jp-play:before { |
|
background: #d43f57; |
|
box-shadow: 0 0 0.1875rem rgba(212, 63, 87, 0.8); |
|
} |
|
.Low .jp-audio.jp-state-playing .jp-controls .jp-play { |
|
color: #dfba69; |
|
text-shadow: 0 0 0.125rem rgba(223, 186, 105, 0.8); |
|
} |
|
.Low .jp-audio.jp-state-playing .jp-controls .jp-play:before { |
|
background: #dfba69; |
|
box-shadow: 0 0 0.1875rem rgba(223, 186, 105, 0.8); |
|
} |
|
.jp-audio .jp-progress { |
|
height: 3.0625rem; |
|
} |
|
.jp-audio .jp-progress .jp-seek-bar { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
.jp-audio .jp-progress .jp-seek-bar .jp-play-bar { |
|
background: rgba(64, 64, 72, 0.2); |
|
height: 100%; |
|
} |
|
|
|
.msg { |
|
background: #DF2828; |
|
color: white; |
|
padding: 0.625rem 0.9375rem; |
|
border-radius: 0.25rem; |
|
margin-bottom: 1.25rem; |
|
} |
|
|
|
del { |
|
text-decoration: line-through; |
|
} |