Minor style fixes

CSS/css-scyfin/scyfin-theme-backdrop.css

@@ -1,7 +1,7 @@
 /* Variables */
 :root {
     --main-accent-color: #00a4dc;
-    --secondary-accent-color: rgba(0, 164, 220, 0.2);
+    --secondary-accent-color: #00a4dc20;
     --main-background-color: #0F0F0F;
     --secondary-background-color: #181818;
     --main-background-transparent: rgba(35,35,35,0.5);
@@ -12,6 +12,7 @@
 /* Setting accent color variable */
 .listItemIcon:not(.listItemIcon-transparent):not(.notification_important),
 .emby-checkbox:checked + span + .checkboxOutline,
+.selectionCommandsPanel,
 .countIndicator {
     background: var(--main-accent-color) !important;
 }
@@ -31,7 +32,8 @@
 .textareaLabelFocused,
 .inputLabelFocused,
 .emby-tab-button:hover,
-.metadataSidebarIcon {
+.metadataSidebarIcon,
+.upNextDialog-countdownText {
     color: var(--main-accent-color) !important;
 }
 @media (hover: hover) and (pointer: fine) {
@@ -109,6 +111,17 @@
 .layout-desktop .collectionItems .collectionItemsContainer {
     padding-left: 0% !important;
 }
+/* Dynamic buttons */
+.layout-desktop .navMenuOption:hover:not(.navMenuOption-selected) {
+    transform: scale(1.05) !important;
+}
+.layout-desktop .listItem {
+    transition: .2s !important;
+    border-radius: var(--rounded-cards) !important;
+}
+.layout-desktop #myPreferencesMenuPage .listItem:hover {
+    transform: scale(1.015);
+}
 
 
 
@@ -149,7 +162,7 @@
     padding: 0px !important;
     backdrop-filter: none !important;
 }
-.itemProgressBar {
+.itemProgressBar:not(.playbackProgress):not(.transcodingProgress):not(.backgroundProgress) {
     height: 10px !important;
     background: var(--main-background-transparent) !important;
     backdrop-filter: blur(2px) !important;
@@ -160,9 +173,32 @@
 .innerCardFooter .cardText {
     padding: 0 0 0 10px !important
 }
+.itemProgressBarForeground:not(.playbackProgress .itemProgressBarForeground):not(.transcodingProgress .itemProgressBarForeground):not(.backgroundProgress .itemProgressBarForeground) {
+    background: var(--main-accent-color) !important;
+}
 .itemProgressBarForeground {
     border-radius: 100px !important;
-    background: var(--main-accent-color) !important;
+}
+.transcodingProgress > div {
+    background-color: hsla(0,0%,100%,.2) !important;
+}
+.activeSession .backgroundProgress,
+.activeSession .playbackProgress,
+.activeSession .transcodingProgress {
+    bottom: 10px !important;
+    border-radius: 100px !important;
+    width: 90% !important;
+    left: 5% !important;
+}
+.sessionNowPlayingInnerContent {
+    padding-bottom: 12px !important;
+    padding-inline: 17px !important;
+}
+.sessionAppInfo {
+    padding: .5em 0em !important;
+}
+.sessionNowPlayingInfo {
+    padding: .8em 0em !important;
 }
 
 
@@ -275,11 +311,12 @@
 
 /* Player modifications */
 .upNextContainer, .toastVisible {
-    backdrop-filter: blur(50px) !important;
+    backdrop-filter: blur(10px) !important;
 }
 .upNextContainer {
     border-radius: var(--rounded-cards) !important;
-    background-color: rgba(0, 0, 0, 0.7) !important;
+    background-color: rgba(0, 0, 0, 0.6) !important;
+    margin: 4% !important;
 }
 .toastVisible {
     border-radius: 30px !important;
@@ -290,6 +327,11 @@
     background-color: var(--secondary-background-transparent) !important;
     backdrop-filter: blur(10px) !important;
 }
+.sliderBubble:not(.osdVolumeSliderContainer .sliderBubble):has(.chapterThumbContainer) {
+    background-color: #ffffff00 !important;
+    top: 25px !important;
+    backdrop-filter: unset !important;
+}
 .mdl-slider-background-flex {
     height: 10px !important;
     margin-top: -5px !important;
@@ -300,24 +342,46 @@
     border-radius: 100px !important;
     background-color: var(--main-accent-color) !important;
 }
-.mdl-slider::-moz-range-thumb {
+.mdl-slider::-moz-range-thumb,
-    background: rgba(0,0,0,0) !important;
+.mdl-slider::-webkit-slider-thumb {
+    background: #ffffff00 !important;
+    height: 10px !important;
+    width: 8px !important;
+    border-radius: 2px !important;
+}
+.mdl-slider-hoverthumb:hover::-moz-range-thumb,
+.mdl-slider-hoverthumb:hover::-webkit-slider-thumb {
+    transform: scaleY(2);
+    background: #fff !important;
 }
 .mdl-slider-background-upper {
-    display: none !important;
+    border-top-right-radius: 100px !important;
+    border-bottom-right-radius: 100px !important;
+    background: hsla(0,0%,100%,.2) !important;
+    transform: translateX(-3px) !important;
 }
 .iconOsdProgressInner {
     background: var(--main-accent-color) !important;
 }
 
+/* Up next card */
+.upNextDialog-buttons .upNextDialog-button {
+    transition: .2s !important;
+}
+.upNextDialog-buttons .upNextDialog-button:hover {
+    transform: scale(1.1);
+}
+
 /* Support for Jellyscrub plugin */
 .chapterThumbContainer {
     background: none !important;
     border-radius: var(--rounded-cards) !important;
+    box-shadow: unset !important;
 }
 .chapterThumb {
     border-radius: var(--rounded-cards) !important;
-    margin-bottom: 40px !important;
+    margin-bottom: 47px !important;
+    box-shadow: 0 0 1.9vh #000 !important;
 }
 .chapterThumbTextContainer {
     background: none !important;
@@ -329,6 +393,23 @@
     display: none !important;
 }
 
+/* Support for IntroSkipper plugin */
+.skipIntro {
+    transition: 0.2s;
+    border-radius: 100px !important;
+    padding: 5px 10px !important;
+    backdrop-filter: blur(10px) !important;
+    border: none !important;
+}
+.skipIntro:hover {
+    box-shadow: unset !important;
+    transition: .2s;
+    transform: scale(1.05);
+}
+.skipIntro .paper-icon-button-light:hover:not(:disabled) {
+    color: #FFF !important;
+}
+
 
 
 /* Settings and dashboard modifications */
@@ -552,9 +633,6 @@
     padding-left: 390px !important;
     min-height: 550px !important;
 }
-.layout-desktop .detailPagePrimaryContent:has(.genresGroup.hide):has(.directorsGroup.hide):has(.writersGroup.hide) {
-    min-height: unset !important;
-}
 
 /* Move track selection box */
 .detailSection {

CSS/css-scyfin/scyfin-theme.css

@@ -1,7 +1,7 @@
 /* Variables */
 :root {
     --main-accent-color: #00a4dc;
-    --secondary-accent-color: rgba(0, 164, 220, 0.2);
+    --secondary-accent-color: #00a4dc20;
     --main-background-color: #0F0F0F;
     --secondary-background-color: #181818;
     --main-background-transparent: rgba(35,35,35,0.5);
@@ -12,6 +12,7 @@
 /* Setting accent color variable */
 .listItemIcon:not(.listItemIcon-transparent):not(.notification_important),
 .emby-checkbox:checked + span + .checkboxOutline,
+.selectionCommandsPanel,
 .countIndicator {
     background: var(--main-accent-color) !important;
 }
@@ -31,7 +32,8 @@
 .textareaLabelFocused,
 .inputLabelFocused,
 .emby-tab-button:hover,
-.metadataSidebarIcon {
+.metadataSidebarIcon,
+.upNextDialog-countdownText {
     color: var(--main-accent-color) !important;
 }
 @media (hover: hover) and (pointer: fine) {
@@ -109,6 +111,17 @@
 .layout-desktop .collectionItems .collectionItemsContainer {
     padding-left: 0% !important;
 }
+/* Dynamic buttons */
+.layout-desktop .navMenuOption:hover:not(.navMenuOption-selected) {
+    transform: scale(1.05) !important;
+}
+.layout-desktop .listItem {
+    transition: .2s !important;
+    border-radius: var(--rounded-cards) !important;
+}
+.layout-desktop #myPreferencesMenuPage .listItem:hover {
+    transform: scale(1.015);
+}
 
 
 
@@ -149,7 +162,7 @@
     padding: 0px !important;
     backdrop-filter: none !important;
 }
-.itemProgressBar {
+.itemProgressBar:not(.playbackProgress):not(.transcodingProgress):not(.backgroundProgress) {
     height: 10px !important;
     background: var(--main-background-transparent) !important;
     backdrop-filter: blur(2px) !important;
@@ -160,9 +173,32 @@
 .innerCardFooter .cardText {
     padding: 0 0 0 10px !important
 }
+.itemProgressBarForeground:not(.playbackProgress .itemProgressBarForeground):not(.transcodingProgress .itemProgressBarForeground):not(.backgroundProgress .itemProgressBarForeground) {
+    background: var(--main-accent-color) !important;
+}
 .itemProgressBarForeground {
     border-radius: 100px !important;
-    background: var(--main-accent-color) !important;
+}
+.transcodingProgress > div {
+    background-color: hsla(0,0%,100%,.2) !important;
+}
+.activeSession .backgroundProgress,
+.activeSession .playbackProgress,
+.activeSession .transcodingProgress {
+    bottom: 10px !important;
+    border-radius: 100px !important;
+    width: 90% !important;
+    left: 5% !important;
+}
+.sessionNowPlayingInnerContent {
+    padding-bottom: 12px !important;
+    padding-inline: 17px !important;
+}
+.sessionAppInfo {
+    padding: .5em 0em !important;
+}
+.sessionNowPlayingInfo {
+    padding: .8em 0em !important;
 }
 
 
@@ -278,11 +314,12 @@ html {
 
 /* Player modifications */
 .upNextContainer, .toastVisible {
-    backdrop-filter: blur(50px) !important;
+    backdrop-filter: blur(10px) !important;
 }
 .upNextContainer {
     border-radius: var(--rounded-cards) !important;
-    background-color: rgba(0, 0, 0, 0.7) !important;
+    background-color: rgba(0, 0, 0, 0.6) !important;
+    margin: 4% !important;
 }
 .toastVisible {
     border-radius: 30px !important;
@@ -293,6 +330,11 @@ html {
     background-color: var(--secondary-background-transparent) !important;
     backdrop-filter: blur(10px) !important;
 }
+.sliderBubble:not(.osdVolumeSliderContainer .sliderBubble):has(.chapterThumbContainer) {
+    background-color: #ffffff00 !important;
+    top: 25px !important;
+    backdrop-filter: unset !important;
+}
 .mdl-slider-background-flex {
     height: 10px !important;
     margin-top: -5px !important;
@@ -303,24 +345,46 @@ html {
     border-radius: 100px !important;
     background-color: var(--main-accent-color) !important;
 }
-.mdl-slider::-moz-range-thumb {
+.mdl-slider::-moz-range-thumb,
-    background: rgba(0,0,0,0) !important;
+.mdl-slider::-webkit-slider-thumb {
+    background: #ffffff00 !important;
+    height: 10px !important;
+    width: 8px !important;
+    border-radius: 2px !important;
+}
+.mdl-slider-hoverthumb:hover::-moz-range-thumb,
+.mdl-slider-hoverthumb:hover::-webkit-slider-thumb {
+    transform: scaleY(2);
+    background: #fff !important;
 }
 .mdl-slider-background-upper {
-    display: none !important;
+    border-top-right-radius: 100px !important;
+    border-bottom-right-radius: 100px !important;
+    background: hsla(0,0%,100%,.2) !important;
+    transform: translateX(-3px) !important;
 }
 .iconOsdProgressInner {
     background: var(--main-accent-color) !important;
 }
 
+/* Up next card */
+.upNextDialog-buttons .upNextDialog-button {
+    transition: .2s !important;
+}
+.upNextDialog-buttons .upNextDialog-button:hover {
+    transform: scale(1.1);
+}
+
 /* Support for Jellyscrub plugin */
 .chapterThumbContainer {
     background: none !important;
     border-radius: var(--rounded-cards) !important;
+    box-shadow: unset !important;
 }
 .chapterThumb {
     border-radius: var(--rounded-cards) !important;
-    margin-bottom: 40px !important;
+    margin-bottom: 47px !important;
+    box-shadow: 0 0 1.9vh #000 !important;
 }
 .chapterThumbTextContainer {
     background: none !important;
@@ -332,6 +396,23 @@ html {
     display: none !important;
 }
 
+/* Support for IntroSkipper plugin */
+.skipIntro {
+    transition: 0.2s;
+    border-radius: 100px !important;
+    padding: 5px 10px !important;
+    backdrop-filter: blur(10px) !important;
+    border: none !important;
+}
+.skipIntro:hover {
+    box-shadow: unset !important;
+    transition: .2s;
+    transform: scale(1.05);
+}
+.skipIntro .paper-icon-button-light:hover:not(:disabled) {
+    color: #FFF !important;
+}
+
 
 
 /* Settings and dashboard modifications */
@@ -542,9 +623,6 @@ html {
     padding-left: 390px !important;
     min-height: 550px !important;
 }
-.layout-desktop .detailPagePrimaryContent:has(.genresGroup.hide):has(.directorsGroup.hide):has(.writersGroup.hide) {
-    min-height: unset !important;
-}
 
 /* Move track selection box */
 .detailSection {