Mix Youtube videos like a true DJ!
https://dj.tflcl.xyz
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
359 lines
6.5 KiB
359 lines
6.5 KiB
:root { |
|
--bg-color: #223; |
|
--text-color: #eee; |
|
--text-color-light: #bbb; |
|
--accent-color-1: #ff91d8; |
|
--accent-color-1-light: #ffcdff; |
|
--accent-color-2: #ffff7d; |
|
|
|
--crossfader-thumb-width: 30px; |
|
--crossfader-thumb-height: 60px; |
|
--crossfader-thumb-radius: 15px; |
|
|
|
} |
|
|
|
@font-face { |
|
font-family: 'Roboto'; |
|
font-style: normal; |
|
font-weight: 400; |
|
font-display: swap; |
|
src: url(fonts/Roboto Regular.woff2) format('woff2'); |
|
} |
|
@font-face { |
|
font-family: 'Roboto'; |
|
font-style: normal; |
|
font-weight: 100; |
|
font-display: swap; |
|
src: url(fonts/Roboto Thin.woff2) format('woff2'); |
|
} |
|
@font-face { |
|
font-family: 'Roboto'; |
|
font-style: normal; |
|
font-weight: 900; |
|
font-display: swap; |
|
src: url(fonts/Roboto Black.woff2) format('woff2'); |
|
} |
|
|
|
html { |
|
color: var(--text-color); |
|
font-size: 1em; |
|
line-height: 1.4; |
|
font-family: Roboto, Arial, sans-serif; |
|
} |
|
|
|
::-moz-selection { |
|
background: #b3d4fc; |
|
text-shadow: none; |
|
} |
|
|
|
::selection { |
|
background: #b3d4fc; |
|
text-shadow: none; |
|
} |
|
|
|
hr { |
|
display: block; |
|
height: 1px; |
|
border: 0; |
|
border-top: 1px solid var(--text-color); |
|
margin: 1em 0; |
|
padding: 0; |
|
} |
|
|
|
audio, |
|
canvas, |
|
iframe, |
|
img, |
|
svg, |
|
video { |
|
vertical-align: middle; |
|
} |
|
|
|
fieldset { |
|
border: 0; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
textarea { |
|
resize: vertical; |
|
} |
|
|
|
#bg { |
|
z-index: -2; |
|
overflow: hidden; |
|
position: fixed; |
|
min-width: 100%; |
|
min-height: 100%; |
|
background: rgb(34,34,51); |
|
background: linear-gradient(180deg, rgba(34,34,51,1) 0%, rgba(34,34,51,1) 70%, rgba(171, 92, 102,1) 120%); |
|
} |
|
|
|
#bg img { |
|
z-index: -1; |
|
position: fixed; |
|
} |
|
|
|
#desk { |
|
/* display: none; */ |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
min-width: 830px; |
|
} |
|
|
|
#players, #search-area { |
|
display: flex; |
|
justify-content: center; |
|
padding-bottom: 2em; |
|
gap: 15px; |
|
} |
|
|
|
.hidden { |
|
display: none; |
|
} |
|
.player { |
|
max-width: 480px; |
|
display: flex; |
|
flex-wrap: wrap; |
|
gap: 2em 1em; |
|
/* flex-direction: column; */ |
|
align-content: space-between unsafe; |
|
justify-content: space-between; |
|
padding: 1em; |
|
} |
|
|
|
iframe { |
|
max-width: 480px; |
|
width: 100%; |
|
flex-basis: auto; |
|
/* flex-grow: 3; */ |
|
/* box-shadow: 0 0 3em #ffcdff; */ |
|
} |
|
|
|
.volume-slider { |
|
/* flex-grow: 1; */ |
|
transform: rotate(270deg); |
|
width: 5em; |
|
height: 3em; |
|
} |
|
|
|
#playerA .volume-slider { |
|
/* right: 0; */ |
|
} |
|
|
|
.load-button { |
|
/* flex-grow: 2; */ |
|
cursor: pointer; |
|
border: none; |
|
background-color: var(--accent-color-2); |
|
color: var(--bg-color); |
|
font-weight: 900; |
|
border-radius: 5px; |
|
/* padding: 2em; */ |
|
width: 50%; |
|
} |
|
|
|
|
|
.control-label { |
|
font-size: 0.8em; |
|
|
|
margin: auto; |
|
font-weight: 100; |
|
color: var(--text-color-light); |
|
} |
|
|
|
.control-label span { |
|
font-weight: 400; |
|
color: var(--accent-color-2); |
|
} |
|
|
|
.volume-control { |
|
padding-top: 1em; |
|
} |
|
.volume-control .control-label { |
|
width: 5em; |
|
padding-top: 1em; |
|
/* transform: rotate(270deg); */ |
|
text-align: center; |
|
} |
|
|
|
span.volume-value { |
|
color: var(--text-color-light); |
|
} |
|
|
|
.speed-control { |
|
width: 20%; |
|
height: auto; |
|
/* margin: auto; */ |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
} |
|
|
|
.speed-control .control-label { |
|
margin: 0.2em auto; |
|
} |
|
|
|
.speed-slider { |
|
width: 100%; |
|
} |
|
|
|
.speed-value { |
|
display: inline-block; |
|
} |
|
|
|
|
|
#crossfader-wrapper { |
|
width: 30em; |
|
padding: 3em 0; |
|
} |
|
#crossfader { |
|
width: 100%; |
|
z-index: 2; |
|
} |
|
|
|
.graduations { |
|
z-index: 0; |
|
width: 100; |
|
margin: 0 13px 0 13px; |
|
display: flex; |
|
justify-content: space-between; |
|
} |
|
.graduation { |
|
z-index: 0; |
|
width: 3px; |
|
height: 23px; |
|
border-radius: 23px; |
|
background-color: var(--accent-color-1-light); |
|
} |
|
|
|
.graduation-small { |
|
width: 2px; |
|
height: 8px; |
|
} |
|
|
|
/* Custom crossfader styling made using http://danielstern.ca/range.css */ |
|
input[type=range] { |
|
background-color: transparent; |
|
-webkit-appearance: none; |
|
} |
|
input[type=range]:focus { |
|
outline: none; |
|
} |
|
input[type=range]::-webkit-slider-runnable-track { |
|
background: var(--accent-color-1); |
|
border-radius: 25px; |
|
width: 100%; |
|
cursor: pointer; |
|
} |
|
input[type=range]::-webkit-slider-thumb { |
|
background: var(--accent-color-2); |
|
border: solid var(--accent-color-1-light); |
|
border-width: 0px; |
|
cursor: pointer; |
|
-webkit-appearance: none; |
|
} |
|
input[type=range]:focus::-webkit-slider-runnable-track { |
|
background: var(--accent-color-1-light); |
|
} |
|
input[type=range]::-moz-range-track { |
|
background: var(--accent-color-1); |
|
width: 100%; |
|
cursor: pointer; |
|
border-radius: 25px; |
|
} |
|
input[type=range]::-moz-range-thumb { |
|
background: var(--accent-color-2); |
|
/* border: solid var(--accent-color-1-light); */ |
|
cursor: pointer; |
|
border-width: 0px; |
|
border-radius: var(--crossfader-thumb-radius); |
|
} |
|
input[type=range]::-ms-track { |
|
background: transparent; |
|
border-color: transparent; |
|
color: transparent; |
|
width: 100%; |
|
cursor: pointer; |
|
} |
|
input[type=range]::-ms-fill-lower { |
|
background: var(--accent-color-1); |
|
border-radius: 25px; |
|
} |
|
input[type=range]::-ms-fill-upper { |
|
background: var(--accent-color-1); |
|
border-radius: 25px; |
|
} |
|
input[type=range]::-ms-thumb { |
|
background: var(--accent-color-2); |
|
/* border: solid var(--accent-color-1-light); */ |
|
cursor: pointer; |
|
margin-top: 0px; |
|
/*Needed to keep the Edge thumb centred*/ |
|
} |
|
input[type=range]:focus::-ms-fill-lower { |
|
background: var(--accent-color-1); |
|
} |
|
input[type=range]:focus::-ms-fill-upper { |
|
background: var(--accent-color-1-light); |
|
} |
|
|
|
/*------------------------*/ |
|
input[type=range]#crossfader::-webkit-slider-runnable-track { |
|
height: 13.3px; |
|
} |
|
input[type=range]#crossfader::-webkit-slider-thumb { |
|
margin-top: -20.65px; |
|
width: var(--crossfader-thumb-width); |
|
height: var(--crossfader-thumb-height); |
|
/* border-width: 5px; |
|
border-radius: 12px; */ |
|
} |
|
|
|
input[type=range]#crossfader::-moz-range-track { |
|
/* border-radius: 25px; */ |
|
width: 100%; |
|
height: 13.3px; |
|
cursor: pointer; |
|
} |
|
input[type=range]#crossfader::-moz-range-thumb { |
|
width: var(--crossfader-thumb-width); |
|
height: var(--crossfader-thumb-height); |
|
/* border-width: 5px; */ |
|
/* border-radius: 12px; */ |
|
cursor: pointer; |
|
} |
|
input[type=range]#crossfader::-ms-track { |
|
/* border-width: 18.75px 0; */ |
|
height: 13.3px; |
|
} |
|
input[type=range]#crossfader::-ms-fill-lower { |
|
/* border-width: 2.3px; |
|
border-radius: 50px; */ |
|
} |
|
input[type=range]#crossfader::-ms-fill-upper { |
|
/* border-radius: 50px; */ |
|
} |
|
input[type=range]#crossfader::-ms-thumb { |
|
width: var(--crossfader-thumb-width); |
|
height: var(--crossfader-thumb-height); |
|
/* border-width: 5px; |
|
border-radius: 12px; */ |
|
cursor: pointer; |
|
margin-top: 0px; |
|
/*Needed to keep the Edge thumb centred*/ |
|
} |
|
|
|
|
|
.footer { |
|
font-weight: 100; |
|
} |
|
.footer a, .footer a:visited { |
|
color: var(--text-color); |
|
text-decoration: none; |
|
} |
|
|
|
.footer span { |
|
cursor: pointer; |
|
}
|
|
|