From f71e3864129ae473bb40edbcef7c6403c497650f Mon Sep 17 00:00:00 2001
From: Mister Rajoy <danielarezdiaz@gmail.com>
Date: Sun, 13 Dec 2020 20:51:54 +0100
Subject: [PATCH] Add sections

---
 .../Configuration/configurationpage.html            | 12 ++++++++++--
 skins-3.0.json                                      | 13 +++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
index fc51f01..5cafb4a 100644
--- a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
+++ b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
@@ -72,6 +72,8 @@
           html += getSelector(element);
         }else if(element.type == "slider"){
           html += getSlider(element);
+        }else if(element.type == "section"){
+          html += getSection(element);
         }
       });
       html += loadPreviews(skin);
@@ -172,7 +174,7 @@
       return html
 
       }
-        function getImage(url){
+      function getImage(url){
         var html = "";
         html += '<fieldset class="verticalSection verticalSection-extrabottompadding"><img src="'+url+'">';
         return html;
@@ -182,7 +184,13 @@
         var html = "";
         html += '<legend>'+name+'</legend></fieldset>';
         return html;
-      }          
+      }  
+      
+      function getSection(option){
+        var html = "";
+        var name = option.name;
+        html += html += '<h2 class="sectionTitle" >'+ name +'</h2>';
+      }
         
       function createCss(){
         var savedHtml = "";
diff --git a/skins-3.0.json b/skins-3.0.json
index 4c5ab5a..23effd3 100644
--- a/skins-3.0.json
+++ b/skins-3.0.json
@@ -302,6 +302,19 @@
         "description": "This modifies the colors of the cast, search and user buttons in the top right.",
         "css": ".headerRight { color: $; }",
         "default":"#ffffff"
+      },
+	  {
+		"type": "section",
+		"name": "Buttons"
+	  },
+	  {
+        "type": "colorPicker",
+        "mode": "hex",
+        "name": "Interact Buttons Color",
+        "description": "This modifies the color of interact buttons.",
+        "css": ".paper-icon-button-light { color: $ !important; } .paper-icon-button-light:hover:not(:disabled) { color:$ !important; background-color: $ !important; } .paper-icon-button-light:focus:not(:disabled) { color:$ !important; background-color: $ !important; }",
+        "default":"#00a4dc",
+		"preview":"https://github.com/LambadaCorez/custom_css_jellyfin/blob/master/ui/buttons/colored_interact_buttons/colored_buttons_example3.png?raw=true"
       },
       {
         "type": "number",