Update skins-3.0.json

Add Css editor

Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html

@@ -55,7 +55,8 @@
       updateSelectors()
     }
 
-    function loadOptions(options){
+    function loadOptions(skin){
+      var options = skin.options;
       var page = $.mobile.activePage;
       var html = "";
       html += '<div data-role="controlgroup">';
@@ -72,15 +73,31 @@
           html += getSlider(element);
         }
       });
+      html += loadPreviews(skin);
       html += '</div>';
       $('#options', page).html(html).trigger('create');
     }
+
+    function loadPreviews(skin){
+      if(skin.previews == undefined){
+        return "";
+      }
+      var html = "";
+        html += '<h2 class="sectionTitle" >Previews</h2>';
+        skin.previews.forEach(element => {          
+           html += getImage(element.url);
+           html += getImgnames(element.name); 
+          });
+        return html;
+    }
+
     function getCheckBox ( option) {
       var html = "";
       var id = "chkFolder" ;
       var name = option.name;
       var css = option.css;
-      var description = option.description;                         
+      var description = option.description;
+                      
       //html += '<label><input is="emby-checkbox" class="chkLibrary" type="checkbox" data-mini="true" id="' + id + '" name="' + id + '" data-value="' + value + '" '+' /><span>' + name  + '</span></label>';
       html += '<div class="checkboxContainer checkboxContainer-withDescription"><label><input class = "checkbox" type="checkbox" is="emby-checkbox" id="' + id + '"name="' + id + '" data-css="' + css + '" '+' /><span>'+ name +'</span></label><div class="fieldDescription checkboxFieldDescription">'+description+'</div></div>'
       return html;
@@ -119,88 +136,115 @@
       html += '<div class="selectContainer"><select is="emby-select"  data-css= "'+css + '"class="selector" label="'+name+'">' + getOptions(option)+'</select></div>'
       return html;
     }
-      function getOptions(option){
-        var html = "";
-        var selections = option.selections
-        var css = option.css;
-        selections.forEach(element=>{
-          var name = element.name;                 
-          html+= '<option data-css= "'+css + '"value='+name+'>'+ name +'</option>'
+    function getOptions(option){
+      var html = "";
+      var selections = option.selections
+      var css = option.css;
+      selections.forEach(element=>{
+        var name = element.name;                 
+        html+= '<option data-css= "'+css + '"value='+name+'>'+ name +'</option>'
         })
         return html;
+    }
+    function getSlider(option){
+
+      var html = "";
+      var id = "slider" ;
+      var name = option.name; 
+      var css = option.css;
+      var step = option.step==undefined?1:option.step;
+      var defaultValue = option.default;
+      var description = option.description;                           
+      html += '<div class="inputContainer"><input is="emby-slider" type="range" class = "slider" value=' + defaultValue + ' step=' + step + ' data-css = "'+ css+ '"  id="' + id + '" name="' + id + '"  min="0" max="300" label="'+name +'" /><div class="fieldDescription">'+description+'</div></div>'
+      return html
+
       }
-        function getSlider(option){
-          var html = "";
-          var id = "slider" ;
-          var name = option.name; 
-          var css = option.css;
-          var step = option.step==undefined?1:option.step;
-          var defaultValue = option.default;
-          var description = option.description;                           
-          html += '<div class="inputContainer"><input is="emby-slider" type="range" class = "slider" value=' + defaultValue + ' step=' + step + ' data-css = "'+ css+ '"  id="' + id + '" name="' + id + '"  min="0" max="300" label="'+name +'" /><div class="fieldDescription">'+description+'</div></div>'
-          return html
-        }             
+        function getImage(url){
+        var html = "";
+        html += '<fieldset class="verticalSection verticalSection-extrabottompadding"><img src="'+url+'">';
+        return html;
+      }
+
+      function getImgnames(name){
+        var html = "";
+        html += '<legend>'+name+'</legend></fieldset>';
+        return html;
+      }          
         
-        function createCss(){
-          var savedHtml = "";
-          //process checkbox
-          var css = $('#cssOptions').val();
-          savedHtml += document.getElementById("cssOptions").innerHTML;
-          var checkboxes = document.getElementsByClassName("checkbox");
-          for (let element of checkboxes) {
-            savedHtml += element.innerHTML;
-          }
-          var selectedOptions = $('.checkbox:checked').map(function () {
+      function createCss(){
+        var savedHtml = "";
+        //process checkbox
+        var css = $('#cssOptions').val();
+        savedHtml += document.getElementById("cssOptions").innerHTML;
+        var checkboxes = document.getElementsByClassName("checkbox");
+        for (let element of checkboxes) {
+          savedHtml += element.innerHTML;
+        }
+        var selectedOptions = $('.checkbox:checked').map(function () {
             return this.getAttribute('data-css');
           }).get();
+          
           selectedOptions.forEach(element => {
             css += element +"\n";
           });
+          
           //proccess selector
-          var selectors = document.getElementsByClassName("selector");
-          for (let element of selectors) {
+        var selectors = document.getElementsByClassName("selector");
+        for (let element of selectors) {
             css += element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
             savedHtml += element.outerHTML;  
           }
+          
           //process colorPicker
           selectedOptions.forEach(element=>{
             css += element + "\n";
           })
-          var colorPickers = document.getElementsByClassName("color");
-          for (let element of colorPickers) {
+        var colorPickers = document.getElementsByClassName("color");
+        for (let element of colorPickers) {
             savedHtml += element.outerHTML  
-            if(element.getAttribute("data-mode")=="hex"){
-              color=element.value;
-            }else if(element.getAttribute("data-mode")=="rgba"){
+             if(element.getAttribute("data-mode")=="rgba"){
               var rgbColor = hexToRgb( element.value);
               color = rgbColor.r + "," +rgbColor.g +"," + rgbColor.b;
+            } else{
+              color=element.value;
             }
             css+= element.getAttribute("data-css").replaceAll("$",color)+ "\n";
           }
+
           //procces number selector
-          var numberSelectors = document.getElementsByClassName("number");
-          for (let element of numberSelectors) {
-            savedHtml += element.outerHTML;
+        var numberSelectors = document.getElementsByClassName("number");
+        for (let element of numberSelectors) {
+          savedHtml += element.outerHTML;
             css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
           }
+
           //procces slider
-          var sliders =  document.getElementsByClassName("slider");
-          for (let element of sliders) {
-            css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
+        var sliders =  document.getElementsByClassName("slider");
+        for (let element of sliders) {
+          css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
           }
           return css;       
         }
+
+
         function updateSelectors(){
           var selected = document.getElementById("cssOptions");
           var description = document.getElementById("description");
           data.forEach(element=>{
             if(element.name == selected.selectedOptions[0].innerText){
-              loadOptions(element.options);
+              loadOptions(element);
               description.innerHTML=element.description;
               
+              
             }    
           })
         }
+
+
+        
+
+
+
         function setSkin() {    
           ApiClient.getServerConfiguration().then(function (config) {
             ApiClient.updateServerConfiguration(config).then(function() {
@@ -251,7 +295,18 @@
       return false;
     });
     </script>
-    
+    <style>
+        img{
+            width: 100%;
+        }
+        fieldset.verticalSection.verticalSection-extrabottompadding {
+            border: 1px solid #333333;
+            border-radius: 10px;
+        }
+        legend {
+            font-size: 135%;
+        }
+    </style>
     </div>
 </body>
 </html>

skins-2.0.json

@@ -5,7 +5,7 @@
     "versions": [
       {
         "name": "Default",
-		"description":"Default Skin",
+	"description":"Default, stock, Jellyfin.",
         "css": ""
       }
     ]
@@ -16,7 +16,7 @@
     "versions": [
       {
         "name": "Default",
-		"description":"Default Skin",
+	"description":"A theme that aims to replicate the red and black look of Netflix. Theme is by prayag17.",
         "css": "@import url(https://prayag17.github.io/JellyFlix/default.css);"
       }
     ]
@@ -27,33 +27,33 @@
     "versions": [
       {
         "name": "Default",
-        "description": "Default Skin",
-        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css);"
+        "description": "This theme aims to be minimalistic and somewhat muted in color. Add-ons and custom accent colors are possible, but not entirely supported by this plug-in. Visit the github of the theme for more information.",
+        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
       },
       {
-        "name": "Improve performance",
-        "description": "The theme uses mask-image to fade out items below the top bar as you scroll. This works well on most reasonable hardware but struggles on some phones and especially smart TVs. This switches to a method without using mask-image, but foregoes the fade-out effect. I may switch to this method being the default.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
+        "name": "Sharp corners",
+        "description": "No rounded corners.",
+        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); :root {--rounding: 0px;}"
       },
       {
-        "name": "No rounded corners",
-        "description": "In fact, squares off every rounded corner JF ever had.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/sharp_style.css');"
+        "name": "Accent color - blue",
+        "description": "Uses the default blue color for accents.",
+        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); @import url('https://ctalvio.github.io/Monochromic/jfblue_style.css');"
       },
       {
-        "name": "Accent color preset - blue",
-        "description": "Restores some of the default Jellyfin blue accenting",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/jfblue_style.css');"
+        "name": "Accent color - purple",
+        "description": "Uses a purple shade, also suited for Jellyfin.",
+        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); @import url('https://ctalvio.github.io/Monochromic/jfpurple_style.css');"
       },
       {
-        "name": "Accent color preset - purple",
-        "description": "Purple Accents",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/jfpurple_style.css'); );"
+        "name": "Accent color - blue - sharp",
+        "description": "Uses the default blue color for accents. Sharp corners.",
+        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); @import url('https://ctalvio.github.io/Monochromic/jfblue_style.css'); :root {--rounding: 0px;}"
       },
       {
-        "name": "Restore bottom bar style episode progress",
-        "description": "Don't like my transparent view progress overlay? Use this to go back to the old style.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/bottom-progress_style.css');"
+        "name": "Accent color - purple - sharp",
+        "description": "Uses a purple shade, also suited for Jellyfin. Sharp corners.",
+        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); @import url('https://ctalvio.github.io/Monochromic/jfpurple_style.css'); :root {--rounding: 0px;}"
       }
     ]
   },
@@ -63,8 +63,23 @@
     "versions": [
       {
         "name": "Default",
-		"description":"Default Skin",
-        "css": "@import url(https://ctalvio.github.io/Kaleidochromic/default_style.css);"
+        "description": "This theme aims to be more colorful and minimalistic. Add-ons and custom accent colors are possible, but not entirely supported by this plug-in. Visit the github of the theme for more information.",
+        "css": "@import url(https://ctalvio.github.io/Kaleidochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
+      },
+      {
+        "name": "Sharp corners",
+        "description": "No rounded corners.",
+        "css": "@import url(https://ctalvio.github.io/Kaleidochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); :root {--rounding: 0px;}"
+      },
+      {
+        "name": "Accent color - blue",
+        "description": "Uses the default blue color for accents.",
+        "css": "@import url(https://ctalvio.github.io/Kaleidochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); @import url('https://ctalvio.github.io/Monochromic/jfblue_style.css');"
+      },
+      {
+        "name": "Accent color - blue - sharp",
+        "description": "Uses the default blue color for accents. Sharp corners.",
+        "css": "@import url(https://ctalvio.github.io/Kaleidochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); @import url('https://ctalvio.github.io/Monochromic/jfblue_style.css'); :root {--rounding: 0px;}"
       }
     ]
   },
@@ -74,9 +89,9 @@
     "versions": [
       {
         "name": "Default",
-		"description":"Default Skin",
+	"description":"A very bright and colorful look using lots of drop shadows. Theme is by prayag17.",
         "css": "@import url('https://prayag17.github.io/JellySkin/default.css');"
       }
     ]
   }
-]
+]

skins-3.0.json

@@ -5,10 +5,24 @@
     "description": "Default, stock, Jellyfin.",
     "defaultCss": "",
     "options": [],
-    "preview": {
-      "home": "",
-      "title": ""
-    }
+	"previews":[
+		{
+			"name": "Login Page",
+			"url": ""
+		},
+		{
+			"name": "Home/Index Page",
+			"url": ""
+		},
+		{
+			"name": "Library Page",
+			"url": ""
+		},
+		{
+			"name": "Title page",
+			"url": ""
+		}
+	]
   },
   {
     "name": "JellyFlix",
@@ -16,10 +30,24 @@
     "description": "A theme that aims to replicate the red and black look of Netflix. Theme is by prayag17.",
     "defaultCss": "@import url(https://prayag17.github.io/JellyFlix/default.css);",
     "options": [],
-    "preview": {
-      "home": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/Home.png?raw=true",
-      "title": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/TitlePage.png?raw=true"
-    }
+    "previews":[
+		{
+			"name": "Login Page",
+			"url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/LoginMan.png?raw=true"
+		},
+		{
+			"name": "Home/Index Page",
+			"url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/Home.png?raw=true"
+		},
+		{
+			"name": "Library Page",
+			"url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/LibPage.png?raw=true"
+		},
+		{
+			"name": "Title page",
+			"url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/TV-TitlePage.png?raw=true"
+		}
+	]
   },
   {
     "name": "Monochromic",
@@ -27,7 +55,7 @@
     "description": "This theme aims to be minimalistic and somewhat muted in color. Add-ons and custom accent colors are possible, but not entirely supported by this plug-in. Visit the github of the theme for more information.",
     "defaultCss": "@import url('https://ctalvio.github.io/Monochromic/default_style.css');",
     "options": [
-      {
+	  {
         "type": "checkBox",
         "name": "Improve performance",
         "description": "The theme uses mask-image to fade out items below the top bar as you scroll. This works well on most reasonable hardware but struggles on some phones and especially smart TVs. This switches to a method without using mask-image, but foregoes the fade-out effect. I may switch to this method being the default.",
@@ -60,10 +88,24 @@
         "default": ""
       }
     ],
-    "preview": {
-      "home": "https://github.com/CTalvio/Monochromic/blob/master/screenshots/1.png?raw=true",
-      "title": "https://github.com/CTalvio/Monochromic/blob/master/screenshots/2.png?raw=true"
-    }
+"previews":[
+		{
+			"name": "Login Page",
+			"url": "https://github.com/danieladov/jellyfin-plugin-skin-manager/blob/master/src/img/Monochromic/login.jpg?raw=true"
+		},
+		{
+			"name": "Home/Index Page",
+			"url": "https://github.com/CTalvio/Monochromic/blob/master/screenshots/1.png?raw=true"
+		},
+		{
+			"name": "Library Page",
+			"url": "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/src/img/Monochromic/Lib.jpg"
+		},
+		{
+			"name": "Title page",
+			"url": "https://github.com/CTalvio/Monochromic/raw/master/screenshots/2.png"
+		}
+	]
   },
   {
     "name": "Kaleidochromic",
@@ -98,16 +140,30 @@
         "default": "#6279cd"
       }
     ],
-    "preview": {
-      "home": "https://github.com/CTalvio/Kaleidochromic/blob/main/screenshots/6.png?raw=true",
-      "title": "https://github.com/CTalvio/Kaleidochromic/blob/main/screenshots/1.png?raw=true"
-    }
+	"previews":[
+		{
+			"name": "Login Page",
+			"url": "https://github.com/danieladov/jellyfin-plugin-skin-manager/blob/master/src/img/Kaleidochromic/Login.jpg?raw=true"
+		},
+		{
+			"name": "Home/Index Page",
+			"url": "https://github.com/CTalvio/Kaleidochromic/raw/main/screenshots/6.png"
+		},
+		{
+			"name": "Library Page",
+			"url": "https://github.com/CTalvio/Kaleidochromic/raw/main/screenshots/5.png"
+		},
+		{
+			"name": "Title page",
+			"url": "https://github.com/CTalvio/Kaleidochromic/raw/main/screenshots/1.png"
+		}
+	]
   },
   {
     "name": "JellySkin",
     "author": "prayagprajapati17",
     "description": "A very bright and colorful look using lots of drop shadows. Theme is by prayag17.",
-    "defaultCss": "@import url('https://prayag17.github.io/JellySkin/default.css');",
+    "defaultCss": "@import url('https://prayag17.github.io/JellySkin/default.4');",
     "options": [
       {
         "type": "checkBox",
@@ -134,10 +190,24 @@
         "css": "@import url('https://prayag17.github.io/JellySkin/morningGradient.css');"
       }
     ],
-    "preview": {
-      "home": "https://github.com/prayag17/JellySkin/raw/master/Version%204/Home.png?raw=true",
-      "title": "https://github.com/prayag17/JellySkin/raw/master/Version%204/title%202.png?raw=true"
-    }
+	"previews":[
+		{
+			"name": "Login Page",
+			"url": "https://github.com/prayag17/JellySkin/raw/master/Version%204/Login.png?raw=true"
+		},
+		{
+			"name": "Home/Index Page",
+			"url": "https://github.com/prayag17/JellySkin/raw/master/Version%204/Home.png?raw=true"
+		},
+		{
+			"name": "Library Page",
+			"url": "https://github.com/prayag17/JellySkin/raw/master/Version%204/lib%202.png?raw=true"
+		},
+		{
+			"name": "Title page",
+			"url": "https://github.com/prayag17/JellySkin/raw/master/Version%204/title%201.png?raw=true"
+		}
+	]
   },
   {
     "name": "Custom",
@@ -145,7 +215,7 @@
     "description": "customize the look of jellyfin by your needs",
     "defaultCss": "",
     "options": [
-      {
+    {
         "type": "selector",
         "name": "Change Font",
         "description": "Change the default fonts",
@@ -196,7 +266,7 @@
       },
       {
         "type": "colorPicker",
-        "mode": "rgba",
+        "mode":"rgba",
         "name": "Accent color",
         "description": "Choose a custom accent color to use with the theme.",
         "css": ".countIndicator {background: rgba($,0.8);}.playedIndicator, .innerCardFooter /*Accenting*/.button-flat:hover {background: rgba($,0.25);}.paper-icon-button-light:hover {  background-color: rgba($,0.25) !important;}.subtitleappearance-preview {  background: linear-gradient(140deg,rgba($),#111) !important;}.navMenuOption-selected, .selectionCommandsPanel {    background: rgba($, 0.8) !important;}.raised,.fab,a[data-role='button'] {  background: rgba($, 0.8) !important;\ttransition: all 0.2s !important;} /*Glow accent*/ .raised.homeLibraryButton {box-shadow: 0px 0px 5px rgba($, 0) !important; border: solid 1px rgba($,0) !important;}.cardOverlayContainer:hover,.dialog,..raised.homeLibraryButton:hover {  box-shadow: 0px 0px 5px rgb($) !important;  border: solid 1px rgba($,0.6) !important;}.cardOverlayContainer {  border: solid 1px rgba($,0.0) !important;}"
@@ -207,7 +277,7 @@
         "name": "Console Panel Color",
         "description": "Modifies the color of the left menu panel.",
         "css": ".mainDrawer-scrollContainer { color: $; }",
-        "default": "#ffffff"
+        "default":"#ffffff"
       },
       {
         "type": "checkBox",
@@ -235,26 +305,22 @@
         "name": "Right Header Color",
         "description": "This modifies the colors of the cast, search and user buttons in the top right.",
         "css": ".headerRight { color: $; }",
-        "default": "#ffffff"
+        "default":"#ffffff"
       },
       {
         "type": "number",
         "name": "Border Radius",
-        "description": "Change the roundness of text box and more default is zero",
-        "css": "@import url('https://prayag17.github.io/jellyfin-plugin-skin-manager/src/border-radius.css'); :root{--rounding: $px;}",
-        "default": "0"
+        "description":"Change the rounding" ,
+        "css": ":root {--rounding: 0px;}.formDialogHeader {border-top-left-radius: var(--rounding);border-top-right-radius: var(--rounding);}.formDialogFooter {border-bottom-left-radius: var(--rounding);border-bottom-right-radius: var(--rounding);}.cardOverlayContainer {border-radius: var(--rounding) !important;}.toast,.paperList,.cardContent,.sessionNowPlayingInnerContent, .listItem:hover, .cardImage,.fab,.multiSelectCheckboxOutline,.itemSelectionPanel,.cardContent-button, .cardContent-shadow, .itemDetailImage, .cardOverlayButton-hover,.cardImageContainer,.cardPadder,.listItemImage,.listItemImageButton,.listItemButton,.headerButton,.paper-icon-button-light,.innerCardFooter,.blurhash-canvas,.actionSheetMenuItem:hover,.dialog,.listItemIcon,.listItem-border,.button-flat,.visualCardBox,.checkboxOutline,.emby-select-withcolor,.chapterThumbTextContainer,.chapterThumbContainer,.chapterThumb,.emby-input, .emby-textarea, .emby-select-withcolor,.cardOverlayButtonIcon,.subtitleappearance-preview.flex.align-items-center.justify-content-center {border-radius: var(--rounding) !important;}.osdPoster img {border-radius: var(--rounding); border: none;}.mdl-slider::-moz-range-thumb {border-radius: var(--rounding);}.mdl-slider::-ms-thumb {border-radius: var(--rounding);}.mdl-slider::-webkit-slider-thumb {border-radius: var(--rounding);}div[data-role='controlgroup'] a[data-role='button']:first-child {border-bottom-left-radius: var(--rounding);border-top-left-radius: var(--rounding);}div[data-role='controlgroup'] a[data-role='button']:last-child {border-bottom-right-radius: var(--rounding);border-top-right-radius: var(--rounding);}",
+        "default":"0"
       },
       {
         "type": "number",
         "name": "Backdrop Blur",
         "description": "adds blur to the backdrop images default is zero",
-        "css": "@import url('https://prayag17.github.io/jellyfin-plugin-skin-manager/src/bgBlur.css'); :root{--bgblur: blur($px)}",
+        "css": ":root{--bgblur: blur($px)}.backdropImage {filter: var(--bgblur);}.backgroundContainer.withBackdrop {background-color: rgba(0,0,0,0);}",
         "default": "0"
       }
-    ],
-    "preview": {
-      "home": "",
-      "title": ""
-    }
+    ]
   }
 ]