tfl/YTDJ
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

First bits of styling

Browse Source
This commit is contained in:
TFLCL
2022-06-30 23:35:33 +02:00
parent ac34e88809
commit f3c8d13689
1 changed files with 145 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
css/main.css
View File

@@ -12,7 +12,8 @@
========================================================================== */ ========================================================================== */
html { html {
color: #222; background-color: #223;
color: #EEE;
font-size: 1em; font-size: 1em;
line-height: 1.4; line-height: 1.4;
} }
@@ -86,13 +87,156 @@ textarea {
/* ========================================================================== /* ==========================================================================
Author's custom styles Author's custom styles
========================================================================== */ ========================================================================== */
html {
font-family: Arial, sans-serif;
}
#desk { #desk {
display: flex; 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: 15px;
/* flex-direction: column; */
/* align-content: space-between; */
justify-content: space-between;
/* background-color: green; */
padding: 1em;
}
iframe {
max-width: 480px;
width: 100%;
flex-basis: auto;
/* flex-grow: 3; */
/* box-shadow: 0 0 3em #ffcdff; */
} }
.volumeSlider { .volumeSlider {
/* flex-grow: 1; */
transform: rotate(270deg); transform: rotate(270deg);
width: 5em;
height: 5em;
} }
#playerA .volumeSlider {
/* right: 0; */
}
#crossfader {
width: 30em;
}
.load-button {
/* flex-grow: 2; */
border: none;
/* padding: 2em; */
width: 50%;
}
/* Custom crossfader styling made using http://danielstern.ca/range.css */
input[type=range]#crossfader {
/* width: 100%; */
margin: 18.35px 0;
background-color: transparent;
-webkit-appearance: none;
}
input[type=range]#crossfader:focus {
outline: none;
}
input[type=range]#crossfader::-webkit-slider-runnable-track {
background: #ff91d8;
/* border: 2.3px solid #dbd58f; */
border-radius: 25px;
width: 100%;
height: 13.3px;
cursor: pointer;
}
input[type=range]#crossfader::-webkit-slider-thumb {
margin-top: -20.65px;
width: 30px;
height: 50px;
background: #ffff7d;
border: 5px solid #ffcdff;
border-radius: 12px;
cursor: pointer;
-webkit-appearance: none;
}
input[type=range]#crossfader:focus::-webkit-slider-runnable-track {
background: #ffbae6;
}
input[type=range]#crossfader::-moz-range-track {
background: #ff91d8;
/* border: 2.3px solid #dbd58f; */
border-radius: 25px;
width: 100%;
height: 13.3px;
cursor: pointer;
}
input[type=range]#crossfader::-moz-range-thumb {
width: 30px;
height: 50px;
background: #ffff7d;
border: 5px solid #ffcdff;
border-radius: 12px;
cursor: pointer;
}
input[type=range]#crossfader::-ms-track {
background: transparent;
border-color: transparent;
border-width: 18.75px 0;
color: transparent;
width: 100%;
height: 13.3px;
cursor: pointer;
}
input[type=range]#crossfader::-ms-fill-lower {
background: #ff68ca;
border: 2.3px solid #dbd58f;
border-radius: 50px;
}
input[type=range]#crossfader::-ms-fill-upper {
background: #ff91d8;
/* border: 2.3px solid #dbd58f; */
border-radius: 50px;
}
input[type=range]#crossfader::-ms-thumb {
width: 30px;
height: 50px;
background: #ffff7d;
border: 5px solid #ffcdff;
border-radius: 12px;
cursor: pointer;
margin-top: 0px;
/*Needed to keep the Edge thumb centred*/
}
input[type=range]#crossfader:focus::-ms-fill-lower {
background: #ff91d8;
}
input[type=range]#crossfader:focus::-ms-fill-upper {
background: #ffbae6;
}
@supports (-ms-ime-align:auto) {
/* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
input[type=range] {
margin: 0;
/*Edge starts the margin from the thumb, not the track as other browsers do*/
}
}
/* ========================================================================== /* ==========================================================================
Helper classes Helper classes
========================================================================== */ ========================================================================== */