example/modules/floating-progress.css

@@ -0,0 +1,45 @@
+/*
+    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);
+}