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.
452 lines
8.7 KiB
452 lines
8.7 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; |
|
} |
|
|
|
|
|
html { |
|
background-color: var(--bg-color); |
|
color: var(--text-color); |
|
font-size: 1em; |
|
line-height: 1.4; |
|
} |
|
|
|
::-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; |
|
} |
|
|
|
/* ========================================================================== |
|
Author's custom styles |
|
========================================================================== */ |
|
|
|
html { |
|
font-family: Arial, sans-serif; |
|
} |
|
|
|
#desk { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
} |
|
|
|
#players, #search-area { |
|
display: flex; |
|
justify-content: center; |
|
padding-bottom: 2em; |
|
gap: 15px; |
|
} |
|
.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; */ |
|
border: none; |
|
background-color: var(--accent-color-2); |
|
color: var(--bg-color); |
|
border-radius: 5px; |
|
/* padding: 2em; */ |
|
width: 50%; |
|
} |
|
|
|
|
|
.control-label { |
|
font-size: 0.8em; |
|
|
|
margin: auto; |
|
color: var(--text-color-light); |
|
} |
|
|
|
.control-label span { |
|
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 { |
|
width: 30em; |
|
padding: 3em 0; |
|
} |
|
|
|
/* 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: 25px; |
|
} |
|
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: 30px; |
|
height: 50px; |
|
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: 30px; |
|
height: 50px; |
|
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: 30px; |
|
height: 50px; |
|
border-width: 5px; |
|
border-radius: 12px; |
|
cursor: pointer; |
|
margin-top: 0px; |
|
/*Needed to keep the Edge thumb centred*/ |
|
} |
|
|
|
/* ========================================================================== |
|
Helper classes |
|
========================================================================== */ |
|
|
|
/* |
|
* Hide visually and from screen readers |
|
*/ |
|
|
|
.hidden, |
|
[hidden] { |
|
display: none !important; |
|
} |
|
|
|
/* |
|
* Hide only visually, but have it available for screen readers: |
|
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility |
|
* |
|
* 1. For long content, line feeds are not interpreted as spaces and small width |
|
* causes content to wrap 1 word per line: |
|
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe |
|
*/ |
|
|
|
.sr-only { |
|
border: 0; |
|
clip: rect(0, 0, 0, 0); |
|
height: 1px; |
|
margin: -1px; |
|
overflow: hidden; |
|
padding: 0; |
|
position: absolute; |
|
white-space: nowrap; |
|
width: 1px; |
|
/* 1 */ |
|
} |
|
|
|
/* |
|
* Extends the .sr-only class to allow the element |
|
* to be focusable when navigated to via the keyboard: |
|
* https://www.drupal.org/node/897638 |
|
*/ |
|
|
|
.sr-only.focusable:active, |
|
.sr-only.focusable:focus { |
|
clip: auto; |
|
height: auto; |
|
margin: 0; |
|
overflow: visible; |
|
position: static; |
|
white-space: inherit; |
|
width: auto; |
|
} |
|
|
|
/* |
|
* Hide visually and from screen readers, but maintain layout |
|
*/ |
|
|
|
.invisible { |
|
visibility: hidden; |
|
} |
|
|
|
/* |
|
* Clearfix: contain floats |
|
* |
|
* For modern browsers |
|
* 1. The space content is one way to avoid an Opera bug when the |
|
* `contenteditable` attribute is included anywhere else in the document. |
|
* Otherwise it causes space to appear at the top and bottom of elements |
|
* that receive the `clearfix` class. |
|
* 2. The use of `table` rather than `block` is only necessary if using |
|
* `:before` to contain the top-margins of child elements. |
|
*/ |
|
|
|
.clearfix::before, |
|
.clearfix::after { |
|
content: " "; |
|
display: table; |
|
} |
|
|
|
.clearfix::after { |
|
clear: both; |
|
} |
|
|
|
/* ========================================================================== |
|
EXAMPLE Media Queries for Responsive Design. |
|
These examples override the primary ('mobile first') styles. |
|
Modify as content requires. |
|
========================================================================== */ |
|
|
|
@media only screen and (min-width: 35em) { |
|
/* Style adjustments for viewports that meet the condition */ |
|
} |
|
|
|
@media print, |
|
(-webkit-min-device-pixel-ratio: 1.25), |
|
(min-resolution: 1.25dppx), |
|
(min-resolution: 120dpi) { |
|
/* Style adjustments for high resolution devices */ |
|
} |
|
|
|
/* ========================================================================== |
|
Print styles. |
|
Inlined to avoid the additional HTTP request: |
|
https://www.phpied.com/delay-loading-your-print-css/ |
|
========================================================================== */ |
|
|
|
@media print { |
|
*, |
|
*::before, |
|
*::after { |
|
background: #fff !important; |
|
color: #000 !important; |
|
/* Black prints faster */ |
|
box-shadow: none !important; |
|
text-shadow: none !important; |
|
} |
|
|
|
a, |
|
a:visited { |
|
text-decoration: underline; |
|
} |
|
|
|
a[href]::after { |
|
content: " (" attr(href) ")"; |
|
} |
|
|
|
abbr[title]::after { |
|
content: " (" attr(title) ")"; |
|
} |
|
|
|
/* |
|
* Don't show links that are fragment identifiers, |
|
* or use the `javascript:` pseudo protocol |
|
*/ |
|
a[href^="#"]::after, |
|
a[href^="javascript:"]::after { |
|
content: ""; |
|
} |
|
|
|
pre { |
|
white-space: pre-wrap !important; |
|
} |
|
|
|
pre, |
|
blockquote { |
|
border: 1px solid #999; |
|
page-break-inside: avoid; |
|
} |
|
|
|
/* |
|
* Printing Tables: |
|
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables |
|
*/ |
|
thead { |
|
display: table-header-group; |
|
} |
|
|
|
tr, |
|
img { |
|
page-break-inside: avoid; |
|
} |
|
|
|
p, |
|
h2, |
|
h3 { |
|
orphans: 3; |
|
widows: 3; |
|
} |
|
|
|
h2, |
|
h3 { |
|
page-break-after: avoid; |
|
} |
|
}
|
|
|