ampache_react/app/styles/elements/WebPlayer.scss

81 lines
940 B
SCSS

/**
* Styles for the WebPlayer component.
*/
/** Variables */
$controlsMarginTop: 10px;
.webplayer {
margin-top: 1em;
}
.art {
opacity: 0.75;
position: absolute;
z-index: -10;
}
.artRow {
min-height: 200px;
position: relative;
}
.artTimer {
position: absolute;
width: 50px;
height: 200px;
background-color: black;
opacity: 0.75;
z-index: -9;
}
.artDuration {
position: absolute;
bottom: 0;
right: 0;
text-align: right;
}
/**
* Controls
*/
.controls {
margin-top: $controlsMarginTop;
}
.btn {
background: transparent;
border: none;
opacity: 0.4;
}
.btn:hover,
.btn:active,
.btn:focus {
opacity: 1;
outline: none;
}
.prevBtn,
.playPauseBtn,
.nextBtn,
.volumeBtn,
.repeatBtn,
.randomBtn,
.playlistBtn {
composes: btn;
}
.playPauseBtn {
font-size: $font-size-h2;
}
.playlistBtn {
color: white;
}
.active {
color: $blue;
}