125 lines
2.3 KiB
CSS
125 lines
2.3 KiB
CSS
/* (A) DETAILS ICON */
|
|
details > summary {
|
|
list-style-type: '📜';
|
|
color: gold;
|
|
font-family: "JetBrains Mono", system-ui, sans-serif;
|
|
font-size: 0.9em;
|
|
margin: 0 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
details[open] > summary {
|
|
list-style-type: '🎶 Playlist';
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
ditails {
|
|
border: 1px solid gray;
|
|
border-radius: 0.2rem;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
details[open] > summary {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* (A) MATERIAL ICONS */
|
|
.material-icons {
|
|
font-size: 1.6em;
|
|
color: #F7DA08;
|
|
}
|
|
|
|
/* (B) WRAPPER */
|
|
#aWrap {
|
|
font-family: sans-serif;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
max-width: 26rem;
|
|
padding: 0.5em;
|
|
border-radius: 0.4em;
|
|
background: #1f1d11;
|
|
}
|
|
|
|
/* (C) PLAY/PAUSE BUTTON */
|
|
#aPlay {
|
|
padding: 0;
|
|
margin: 0;
|
|
background: 0;
|
|
border: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* (D) TIME */
|
|
#aCron {
|
|
font-size: 0.8em;
|
|
color: #4CAF50;
|
|
margin: 0 10px;
|
|
font-family: "JetBrains Mono", system-ui, sans-serif;
|
|
font-style: regular;
|
|
}
|
|
|
|
/* (E) RANGE SLIDERS */
|
|
/* (E1) HIDE DEFAULT */
|
|
#aWrap input[type="range"] {
|
|
box-sizing: border-box;
|
|
appearance: none;
|
|
border: none;
|
|
outline: none;
|
|
box-shadow: none;
|
|
width: 24%;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: 0;
|
|
}
|
|
#aWrap input[type="range"]::-webkit-slider-thumb {
|
|
appearance: none;
|
|
}
|
|
|
|
/* (E2) CUSTOM SLIDER TRACK */
|
|
#aWrap input[type=range]::-webkit-slider-runnable-track {
|
|
background: #F7DA08;
|
|
}
|
|
#aWrap input[type=range]::-moz-range-track {
|
|
background: #E49200;
|
|
}
|
|
|
|
/* (E3) CUSTOM SLIDER BUTTON */
|
|
#aWrap input[type=range]::-webkit-slider-thumb {
|
|
width: 0.6em; height: 0.6em;
|
|
border-radius: 50%;
|
|
border: 0;
|
|
background: #fff;
|
|
}
|
|
#aWrap input[type=range]::-moz-range-thumb {
|
|
width: 0.6em; height: 0.6em;
|
|
border-radius: 50%;
|
|
border: 0;
|
|
background: #F5DF50;
|
|
}
|
|
|
|
/* (F) VOLUME */
|
|
#aVolIco {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
/* (G) PLAYLIST */
|
|
#aList {
|
|
font-family: Victor Mono, sans-serif;
|
|
font-style: italic;
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
color: #F5DF70;
|
|
font-size: 0.9em;
|
|
background: #0f0d11;
|
|
}
|
|
|
|
.aRow {
|
|
cursor: pointer;
|
|
padding: 0.2em 0;
|
|
}
|
|
.aRow.now {
|
|
color: #4CAF50;
|
|
}
|