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;
+                      
       //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;
@@ -130,6 +147,7 @@
         return html;
     }
     function getSlider(option){
+
       var html = "";
       var id = "slider" ;
       var name = option.name; 
@@ -139,6 +157,18 @@
       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(){
@@ -153,15 +183,18 @@
         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) {
             css += element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
             savedHtml += element.outerHTML;  
           }
+          
           //process colorPicker
           selectedOptions.forEach(element=>{
             css += element + "\n";
@@ -169,20 +202,22 @@
         var colorPickers = document.getElementsByClassName("color");
         for (let element of colorPickers) {
             savedHtml += element.outerHTML  
-            if(element.getAttribute("data-mode")=="hex"){
+             if(element.getAttribute("data-mode")=="rgba"){
-              color=element.value;
-            }else 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;
             css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
           }
+
           //procces slider
         var sliders =  document.getElementsByClassName("slider");
         for (let element of sliders) {
@@ -190,17 +225,26 @@
           }
           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",
+        "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);"
+        "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",
+        "name": "Sharp corners",
-        "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.",
+        "description": "No rounded corners.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
+        "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",
+        "name": "Accent color - blue",
-        "description": "In fact, squares off every rounded corner JF ever had.",
+        "description": "Uses the default blue color for accents.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/sharp_style.css');"
+        "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",
+        "name": "Accent color - purple",
-        "description": "Restores some of the default Jellyfin blue accenting",
+        "description": "Uses a purple shade, also suited for Jellyfin.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/jfblue_style.css');"
+        "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",
+        "name": "Accent color - blue - sharp",
-        "description": "Purple Accents",
+        "description": "Uses the default blue color for accents. Sharp corners.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/jfpurple_style.css'); );"
+        "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",
+        "name": "Accent color - purple - sharp",
-        "description": "Don't like my transparent view progress overlay? Use this to go back to the old style.",
+        "description": "Uses a purple shade, also suited for Jellyfin. Sharp corners.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/bottom-progress_style.css');"
+        "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",
+        "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);"
+        "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,7 +89,7 @@
     "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": {
+	"previews":[
-      "home": "",
+		{
-      "title": ""
+			"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": {
+    "previews":[
-      "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"
+			"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",
@@ -60,10 +88,24 @@
         "default": ""
       }
     ],
-    "preview": {
+"previews":[
-      "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"
+			"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": {
+	"previews":[
-      "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"
+			"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": {
+	"previews":[
-      "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"
+			"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",
@@ -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",
+        "description":"Change the rounding" ,
-        "css": "@import url('https://prayag17.github.io/jellyfin-plugin-skin-manager/src/border-radius.css'); :root{--rounding: $px;}",
+        "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"
+        "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": ""
-    }
   }
 ]