fix: incorrect osd popout colors (#2)

- Themes the popout that shows when changing volume
- Removes background color from header in the video player

Co-authored-by: Adam Perkowski <adas1per@protonmail.com>

src/theme.css

@@ -21,17 +21,19 @@
 .mdl-slider::-webkit-slider-thumb {background-color: var(--main-color);}
 .mdl-slider::-moz-range-thumb {background-color: var(--main-color);}
 
+.navMenuOption-selected,
+.listItemButton:focus,
+.iconOsdProgressInner,
 .mdl-slider-background-lower {
   background-color: var(--main-color);
 }
 
-.mdl-slider-background-flex {
+.iconOsdProgressOuter,
-  background-color: var(--hover-background);
+.mdl-slider-background-flex,
-}
-
 .formDialogHeader:not(.formDialogHeader-clear),
-.formDialogFooter:not(.formDialogFooter-clear) {
+.formDialogFooter:not(.formDialogFooter-clear),
-  background-color: var(--second-background);
+.cardBox:not(.visualCardBox) .cardPadder {
+  background-color: var(--hover-background);
 }
 
 .backgroundContainer,
@@ -49,7 +51,7 @@ html {
 }
 
 .sliderBubble,
-.skinHeader,
+.skinHeader:not(.osdHeader),
 .nowPlayingBar {
   color: var(--main-text);
   background-color: var(--second-background) !important;
@@ -65,14 +67,6 @@ html {
   background: var(--main-background);
 }
 
-.navMenuOption-selected {
-  background-color: var(--main-color);
-}
-
-.itemName {
-  color: var(--main-text);
-}
-
 .playstatebutton-icon-played,
 .ratingbutton-icon-withrating {
   color: var(--red-color);
@@ -105,21 +99,13 @@ html {
   background-color: var(--second-background);
 }
 
-.emby-button-foreground {
-  color: var(--main-text);
-}
-
-.paper-icon-button-light {
-  color: var(--main-text);
-}
-
 .paper-icon-button-light:hover:not(:disabled),
 .paper-icon-button-light:focus,
 .listItem:hover,
 .listItem:focus,
 .navMenuOption:hover,
 .navMenuOption:focus {
-  color: var(--main-color);
+  color: var(--main-color) !important;
   background-color: var(--hover-background);
 }
 
@@ -192,14 +178,11 @@ html {
 .emby-button-foreground:focus,
 .mdl-slider,
 .headerRight,
-.headerLeft {
+.headerLeft,
+.button-link {
   color: var(--main-color);
 }
 
-.mdl-slider::-moz-range-thumb {
-  background-color: var(--main-color);
-}
-
 .MuiButtonBase-root,
 .MuiSvgIcon-root,
 .listItemButton,
@@ -227,10 +210,6 @@ html {
   background-color: var(--main-background);
 }
 
-.listItemButton:focus {
-  background-color: var(--main-color);
-}
-
 .indicator {
   background-color: var(--main-color);
   color: var(--main-background);
@@ -278,6 +257,10 @@ html {
 .navMenuOption,
 .inputLabel,
 .content-primary,
+.itemName,
+.paper-icon-button-light,
+.emby-button-foreground,
+.iconOsd .iconOsdIcon,
 legend {
   color: var(--main-text);
 }
@@ -297,6 +280,10 @@ legend {
   color: var(--main-background);
 }
 
+.iconOsd {
+  background-color: var(--second-background);
+}
+
 /* this has to be background, not background-color for some reason */
 div[role=presentation].jstree-wholerow-clicked {
   background: var(--hover-background) !important;