Merge pull request #22 from prayag17/master

Font selector theme

Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html

@@ -716,7 +716,7 @@
 
     if (
       (d.getDate() >= 18 && d.getMonth() == 11) ||
-            (d.getDate() <= 10 && d.getMonth() == 0)
+      (d.getDate() >= 10 && d.getMonth() == 0)
     ) {
       startChristmas();
     }
@@ -986,6 +986,7 @@
           if (!o.googleFonts) {
             o.googleFonts = [];
           }
+
           this.options = o;
           this.$original = $(original);
           this.setupHtml();
@@ -1050,6 +1051,7 @@
               $("li.active", this.$results).trigger("click");
               return;
             }
+
             this.query += String.fromCharCode(e.keyCode).toLowerCase();
             var $found = $(
               "li[data-query^='" + this.query + "']"
@@ -1061,18 +1063,15 @@
               );
             }
           },
-
           keyUp: function (e) {
             this.keyActive = false;
           },
 
           bindEvents: function () {
             var self = this;
-
             $("li", this.$results)
             .click(__bind(this.selectFont, this))
             .mouseover(__bind(this.activateFont, this));
-
             this.$select.click(
               __bind(function () {
                 self.toggleDropdown("show");

skins-3.0.json

@@ -212,6 +212,10 @@
             "description": "Changes the Jellyfin themed Hover gradient",
             "css": "@import url('https://prayag17.github.io/JellySkin/$.css');",
             "selections": [
+              {
+                "name": "Default",
+                "value": ""
+              },
               {
                 "name": "Sea Gradient",
                 "value": "seaGradient"
@@ -244,56 +248,7 @@
         "name": "Fonts",
         "options": [
           {
-                        "type": "selector",
+            "type": "googleFonts"
-                        "name": "Change Font",
-                        "description": "Change the default fonts",
-                        "css": "html {font-family: $,sans-serif ;  } body,h1,h2,h3 { font-family:$ ,sans-serif;} @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,800;1,900&display=swap');",
-                        "selections": [
-						  {
-							"name": "Noto Sans",
-							"value": "Noto Sans"
-						  },
-						  {
-							"name": "Times New Roman",
-							"value": "Times New Roman"
-						  },
-						  {
-							"name": "Arial",
-							"value": "Arial"
-						  },
-						  {
-							"name": "Helvetica",
-							"value": "Helvetica"
-						  },
-						  {
-							"name": "Times",
-							"value": "Times"
-						  },
-						  {
-							"name": "Courier New",
-							"value": "Courier New"
-						  },
-						  {
-							"name": "Verdana",
-							"value":  "Verdana"
-						  },
-						  {
-							"name": "Courier",
-							"value":"Courier"
-						  },
-						  {
-							"name": "Arial Narrow",
-							"value": "Arial Narrow"
-						  },
-						  {
-							"name": "Candara",
-							"value":"Candara"
-						  },
-						  {
-							"name": "Poppins",
-							"value":"Poppins"
-						  }
-                        ]
           },
           {
             "type": "number",
@@ -302,10 +257,6 @@
             "step": "0.1",
             "css": "h1 {font-size: $em;}",
             "default": "1.8"
-                    },
-					{
-                        "type": "googleFonts",
-						"css" : "/*googleFonts*/"
           },
           {
             "type": "colorPicker",
@@ -318,7 +269,7 @@
           {
             "type": "colorPicker",
             "mode": "hex",
-                        "name": "Console Panel Color",
+            "name": "SideBar Text Color",
             "description": "Modifies the color of the left menu panel.",
             "css": ".mainDrawer-scrollContainer { color: $; }",
             "default": "#ffffff"
@@ -353,6 +304,33 @@
       {
         "name": "Miscellaneous",
         "options": [
+          {
+            "type": "selector",
+            "name": "Poster card hover effect",
+            "description": "Changes the hover effect on Movie/TV show/Music poster card.",
+            "selections": [
+              {
+                "name": "Scale in and out",
+                "css": "/*Dynamic Poster effect-option1*/.cardBox-bottompadded{margin-bottom; 1em !important;}.itemsContainer>.card>.cardBox {margin: 1em;background: rgba(0,0,0,0.5);transition: transform .2s;}.cardBox:hover {transform: scale(1.1);}"
+              },
+              {
+                "name": "Pop up and down",
+                "css": "/*Dynamic Poster effect-option2*/.itemsContainer>.card>.cardBox {margin: 1em;background: rgba(0,0,0,0.5);transition: transform .2s, box-shadow .2s;}.cardBox:hover {transform: translatey(-5px);box-shadow: 0px 5px 10px black;}"
+              },
+              {
+                "name": "Poster Image in and out",
+                "css": "/*Dynamic Poster effect-option3*/button.cardImageContainer:hover {filter: brightness(30%);transform: scale(1.1);}button.cardImageContainer {z-index: 1;transition: filter .2s, transform .25s;}.cardScalable {overflow: hidden;}"
+              },
+              {
+                "name": "Poster Image blur",
+                "css": "/*Dynamic Poster effect-option4*/button.cardImageContainer:hover {filter: brightness(30%) blur(2px);}button.cardImageContainer {z-index: 1;transition: filter .2s;}"
+              },
+              {
+                "name": "Poster Image in and out",
+                "css": "/*Dynamic Poster effect-option4*/button.cardImageContainer:hover {filter: brightness(30%) blur(2px);transform: scale(1.1);}button.cardImageContainer {z-index: 1;transition: filter .2s, transform .25s;}.cardScalable {overflow: hidden;}"
+              }
+            ]
+          },
           {
             "type": "colorPicker",
             "mode": "hex",