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

more styling

master
TFLCL 2 years ago
parent
365163fb40
commit
1759bfe2fb
1 changed files with 106 additions and 95 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 201
      css/main.css

201
css/main.css
Unescape View File

@ -1,33 +1,19 @@
/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
:root {
--bg-color: #223;
--text-color: #eee;
--accent-color-1: #ff91d8;
--accent-color-1-light: #ffcdff;
--accent-color-2: #ffff7d;
}
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
background-color: #223;
color: #EEE;
background-color: var(--bg-color);
color: var(--text-color);
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
@ -38,25 +24,15 @@ html {
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
border-top: 1px solid var(--text-color);
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
@ -66,20 +42,12 @@ video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
@ -108,11 +76,10 @@ html {
max-width: 480px;
display: flex;
flex-wrap: wrap;
gap: 15px;
gap: 2em 1em;
/* flex-direction: column; */
/* align-content: space-between; */
justify-content: space-between;
/* background-color: green; */
padding: 1em;
}
@ -124,62 +91,130 @@ iframe {
/* box-shadow: 0 0 3em #ffcdff; */
}
.volumeSlider {
.volume-slider {
/* flex-grow: 1; */
transform: rotate(270deg);
width: 5em;
height: 5em;
height: 2em;
}
#playerA .volumeSlider {
#playerA .volume-slider {
/* right: 0; */
}
#crossfader {
width: 30em;
}
.load-button {
/* flex-grow: 2; */
border: none;
background-color: var(--accent-color-2);
color: var(--bg-color);
border-radius: 5px;
/* padding: 2em; */
width: 50%;
}
.speed-control {
width: 20%;
display: flex;
flex-direction: column;
}
.speed-control span {
font-size: 0.8em;
margin: 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]#crossfader {
/* width: 100%; */
margin: 18.35px 0;
input[type=range] {
background-color: transparent;
-webkit-appearance: none;
}
input[type=range]#crossfader:focus {
input[type=range]:focus {
outline: none;
}
input[type=range]#crossfader::-webkit-slider-runnable-track {
background: #ff91d8;
/* border: 2.3px solid #dbd58f; */
input[type=range]::-webkit-slider-runnable-track {
background: var(--accent-color-1);
border-radius: 25px;
width: 100%;
height: 13.3px;
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;
background: #ffff7d;
border: 5px solid #ffcdff;
border-width: 5px;
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;
@ -188,54 +223,30 @@ input[type=range]#crossfader::-moz-range-track {
input[type=range]#crossfader::-moz-range-thumb {
width: 30px;
height: 50px;
background: #ffff7d;
border: 5px solid #ffcdff;
border-width: 5px;
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-width: 2.3px;
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-width: 5px;
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

Write Preview
Loading…
Cancel
Save