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.
130 lines
3.1 KiB
130 lines
3.1 KiB
2 years ago
|
:root {
|
||
|
|
--player-background: #cfd7ff;
|
||
|
|
--player-thumb: #212121;
|
||
|
|
--player-track: #ccc;
|
||
|
|
|
||
|
|
--player-playing-shadow: #f887ff;
|
||
|
|
--player-playing-border: #ff00ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.player {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 1;
|
||
|
|
height: 2.5rem;
|
||
|
|
min-width: 400px;
|
||
|
|
max-width: 550px;
|
||
|
|
width: 50vw;
|
||
|
|
align-self: center;
|
||
|
|
user-select: none;
|
||
|
|
|
||
|
|
bottom: -3rem;
|
||
|
|
opacity: 0;
|
||
|
|
visibility: hidden;
|
||
|
|
transition: bottom .5s ease-in-out, opacity .5s, visibility .5s;
|
||
|
|
}
|
||
|
|
.player.active {
|
||
|
|
bottom: 0;
|
||
|
|
opacity: 1;
|
||
|
|
visibility: visible;
|
||
|
|
}
|
||
|
|
.player .controls {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
background-color: var(--player-background);
|
||
|
|
border-radius: .5rem .5rem 0 0;
|
||
|
|
padding: .2rem 1rem;
|
||
|
|
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.player .controls > * {
|
||
|
|
margin-left: .5rem;
|
||
|
|
margin-right: .5rem;
|
||
|
|
}
|
||
|
|
.player .controls > *:first-child { margin-left: 0; }
|
||
|
|
.player .controls > *:last-child { margin-right: 0; }
|
||
|
|
.player .time, .player.duration {
|
||
|
|
min-width: 3rem;
|
||
|
|
}
|
||
|
|
.player .button {
|
||
|
|
min-width: 1.3rem;
|
||
|
|
min-height: 1.3rem;
|
||
|
|
max-width: 1.3rem;
|
||
|
|
max-height: 1.3rem;
|
||
|
|
width: 1.3rem;
|
||
|
|
height: 1.3rem;
|
||
|
|
fill: var(--control-enabled);
|
||
|
|
transition: fill .15s;
|
||
|
|
cursor: pointer;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.player .button:hover {
|
||
|
|
fill: var(--control-selected);
|
||
|
|
}
|
||
|
|
.player .button.disabled {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.player .slider {
|
||
|
|
outline: none;
|
||
|
|
|
||
|
|
flex: 1;
|
||
|
|
min-height: 2rem;
|
||
|
|
height: 2rem;
|
||
|
|
max-height: 2rem;
|
||
|
|
min-width: 4rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.player .bar {
|
||
|
|
position: absolute;
|
||
|
|
z-index: -9;
|
||
|
|
background-color: var(--player-background);
|
||
|
|
border-radius: 1rem 1rem 0 0;
|
||
|
|
margin: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.player .bar.active {
|
||
|
|
bottom: 2.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.player .volume-bar {
|
||
|
|
left: 2.85rem;
|
||
|
|
width: 2rem;
|
||
|
|
height: 6rem;
|
||
|
|
padding: .7rem .1rem .3rem .1rem;
|
||
|
|
bottom: -3.5rem;
|
||
|
|
|
||
|
|
flex-direction: column;
|
||
|
|
transition: bottom .5s ease-in-out;
|
||
|
|
}
|
||
|
|
.player .volume-bar .volume-slider {
|
||
|
|
transform: rotate(270deg);
|
||
|
|
min-width: 5rem;
|
||
|
|
width: 5rem;
|
||
|
|
max-width: 5rem;
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.player .speed-bar {
|
||
|
|
right: 3.3rem;
|
||
|
|
width: 12.25rem;
|
||
|
|
height: 2rem;
|
||
|
|
padding: .5rem .8rem .2rem .8rem;
|
||
|
|
bottom: 0;
|
||
|
|
|
||
|
|
justify-content: center;
|
||
|
|
transition: bottom .5s ease-in-out;
|
||
|
|
}
|
||
|
|
.player .speed-bar .current-speed {
|
||
|
|
text-align: right;
|
||
|
|
min-width: 3rem; width: 3rem; max-width: 3rem;
|
||
|
|
margin-right: .5rem;
|
||
|
|
}
|
||
|
|
.player .speed-bar .speed-slider {
|
||
|
|
margin-right: 1rem;
|
||
|
|
min-width: 5rem; width: 5rem; max-width: 5rem;
|
||
|
|
}
|