Add sections

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 = "";

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",