Files
Tolfin/example/modules/floating-progress.css

45 lines
1.5 KiB
CSS

/*
This module will make progress bars float from the bottom of the card.
This is useful if you wish to make the progress bar more visible.
This can be used as a standalone module.
*/
:root {
--floating-progress-roundness: .75rem;
--floating-progress-height: 10px;
}
.sessionNowPlayingDetails {
padding-bottom: 10px;
}
.fullInnerCardFooter,
.activeSession .backgroundProgress,
.activeSession .playbackProgress,
.activeSession .transcodingProgress {
width: 95%;
bottom: 10px;
margin: 0 auto;
height: var(--floating-progress-height);
border-radius: var(--floating-progress-roundness) !important;
-webkit-border-radius: var(--floating-progress-roundness) !important;
-moz-border-radius: var(--floating-progress-roundness) !important;
}
.itemProgressBar {
height: var(--floating-progress-height);
box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
-webkit-box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
-moz-box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
}
.playbackProgress > div,
.backgroundProgress > div,
.transcodingProgress > div {
box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
-webkit-box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
-moz-box-shadow: inset 0 1px var(--theme-menu-shadow-colour);
border-radius: var(--floating-progress-roundness);
-webkit-border-radius: var(--floating-progress-roundness);
-moz-border-radius: var(--floating-progress-roundness);
}