Merge pull request #1 from odiffey/master

Fixed some buttons and titles not having colors applied

config.json

@@ -1,33 +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"
         }
     }
 }

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

@@ -127,6 +127,7 @@ html {
     border-color: ###accent### !important;
 }
 
+.button-flat:hover,
 .button-flat-accent,
 .button-link {
     color: ###accent### !important;
@@ -210,10 +211,15 @@ select.emby-select-withcolor:focus {
     background: rgba(###accent_rgb###, 0.5) !important;
 }
 
-.paper-icon-button-light:focus {
+.paper-icon-button-light:focus,
+.paper-icon-button-light:hover:not(:disabled) {
     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;

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;
+}