Toggleable transparent header

config.json

@@ -1,40 +1,41 @@
 {
-    "selected_theme":"red",
-    "themes":{
-        "red":{
-            "accent":"#cc0004",
-            "accent_rgb":"204, 0, 4",
-            "light_accent":"#f44242",
-            "focus_accent":"#da0000",
-            "scrollbar_accent":"#880000"
+    "selected_theme": "red",
+    "transparent_header": false,
+    "themes": {
+        "red": {
+            "accent": "#cc0004",
+            "accent_rgb": "204, 0, 4",
+            "light_accent": "#f44242",
+            "focus_accent": "#da0000",
+            "scrollbar_accent": "#880000"
         },
-        "neon_green":{
-            "accent":"#34eb46",
-            "accent_rgb":"52, 235, 70",
-            "light_accent":"#34eb5f",
-            "focus_accent":"#6bff36",
-            "scrollbar_accent":"#36ff43"
+        "neon_green": {
+            "accent": "#34eb46",
+            "accent_rgb": "52, 235, 70",
+            "light_accent": "#34eb5f",
+            "focus_accent": "#6bff36",
+            "scrollbar_accent": "#36ff43"
         },
-        "blue":{
-            "accent":"#2c79de",
-            "accent_rgb":"44, 121, 222",
-            "light_accent":"#4592f7",
-            "focus_accent":"#368dff",
-            "scrollbar_accent":"#2c79ff"
+        "blue": {
+            "accent": "#2c79de",
+            "accent_rgb": "44, 121, 222",
+            "light_accent": "#4592f7",
+            "focus_accent": "#368dff",
+            "scrollbar_accent": "#2c79ff"
         },
-        "pink":{
-            "accent":"#ff8c8c",
-            "accent_rgb":"255, 140, 140",
-            "light_accent":"#ff9c9c",
-            "focus_accent":"#eb8888",
-            "scrollbar_accent":"#e89797"
+        "pink": {
+            "accent": "#ff8c8c",
+            "accent_rgb": "255, 140, 140",
+            "light_accent": "#ff9c9c",
+            "focus_accent": "#eb8888",
+            "scrollbar_accent": "#e89797"
         },
-        "purple":{
-            "accent":"#90298c",
-            "accent_rgb":"144, 41, 140",
-            "light_accent":"#a930a4",
-            "focus_accent":"#81247e",
-            "scrollbar_accent":"#b533b0"
+        "purple": {
+            "accent": "#90298c",
+            "accent_rgb": "144, 41, 140",
+            "light_accent": "#a930a4",
+            "focus_accent": "#81247e",
+            "scrollbar_accent": "#b533b0"
         }
     }
 }

skinner.py

@@ -26,6 +26,9 @@ class skinner(object):
         f = open('template.css','r')
         self.template = f.read()
         f.close()
+        f = open('transparent_header.css','r')
+        self.transparent_header = f.read()
+        f.close()
         self.skin()
 
     def debug_print(self, text):
@@ -37,8 +40,8 @@ class skinner(object):
         f.close()
         return(conf)
 
-    def replace_into_template(self, theme_config):
-        out = str(self.template)
+    def replace_into_template(self, template, theme_config):
+        out = str(template)
         for key in theme_config:
             out = out.replace('###'+key+'###',theme_config[key])
         return(out)
@@ -48,7 +51,10 @@ class skinner(object):
         if selected_theme in self.config['themes']:
             theme_config = self.config['themes'][selected_theme]
             f = open('output.css','w')
-            f.write(self.replace_into_template(theme_config))
+            output = self.replace_into_template(self.template, theme_config)
+            if self.config['transparent_header']:
+                output = output+self.replace_into_template(self.transparent_header, theme_config)
+            f.write(output)
             self.debug_print('Done!')
         else:
             self.debug_print('Bad theme selected.')

template.css

@@ -26,6 +26,7 @@ with this program; if not, write to the Free Software Foundation, Inc.,
 .mdl-slider::-moz-range-thumb { background: ###accent###; }
 .mdl-slider-background-lower { color: ###accent###; background-color: ###accent###; }
 .mdl-slider::-moz-range-progress { color: ###accent###; }
+.skinHeader-withBackground { background-color: ###accent### !important; }
 .navMenuOption-selected { background: ###accent### !important; }
 a.navMenuOption-selected { background: ###accent### !important; }
 .button-submit { background: ###accent### !important; }
@@ -87,6 +88,9 @@ html {
 .ui-shadow {
   background-color: ###accent### !important;
 }
+.skinHeader-withBackground {
+    background-color: ###accent### !important;
+}
 .paper-icon-button-light:focus {
     color: ###accent### !important;
 }
@@ -123,6 +127,7 @@ html {
     border-color: ###accent### !important;
 }
 
+.button-flat:hover,
 .button-flat-accent,
 .button-link {
     color: ###accent### !important;
@@ -211,6 +216,10 @@ select.emby-select-withcolor:focus {
     color: ###accent### !important;
     background-color: rgba(###accent_rgb###, .2) !important;
 }
+.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred .paper-icon-button-light:hover:not(:disabled) {
+    color: ###accent### !important;
+    background-color: rgba(255, 255, 255, .7) !important;
+}
 
 input:focus input[type=checkbox]:focus {
     color: ###accent### !important;
@@ -223,15 +232,3 @@ input:focus input[type=checkbox]:focus {
 .buttonActive {
     color: ###accent### !important;
 }
-
-.emby-tab-button.show-focus:focus,
-.emby-tab-button:hover {
-    color: ###accent### !important;
-}
-
-/* https://jellyfin.org/docs/general/clients/css-customization.html#transparent-top-menu */
-.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred,
-.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {
-    background: none; 
-    background-color: rgba(0, 0, 0, 0);
-}

transparent_header.css

@@ -0,0 +1,17 @@
+/* Top menu transparency https://jellyfin.org/docs/general/clients/css-customization.html#transparent-top-menu */
+.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred {
+    background: none !important; 
+    background-color: rgba(0, 0, 0, 0) !important;
+}
+.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {
+    background: none !important; 
+    background-color: rgba(0, 0, 0, 0) !important;
+}
+.emby-tab-button.show-focus:focus,
+.emby-tab-button:hover {
+    color: ###accent### !important;
+}
+.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred .paper-icon-button-light:hover:not(:disabled) {
+    color: ###accent### !important;
+    background-color: rgba(###accent_rgb###, .2) !important;
+}