Move code to the top

Add few things

Jellyfin.Plugin.SkinManager/Configuration/PluginConfiguration.cs

@@ -1,14 +1,18 @@
 using MediaBrowser.Model.Plugins;
+using System;
+using System.Collections.Generic;
 
 namespace Jellyfin.Plugin.SkinManager.Configuration
 {
     public class PluginConfiguration : BasePluginConfiguration
     {
-        public string selectedCss { get; set; }
+        public string selectedSkin { get; set; }
+        public string[] options { get; set; }
 
         public PluginConfiguration()
         {
-            selectedCss = "";
+            selectedSkin = "";
+            options = Array.Empty<String>();
         }
     }
 }

Jellyfin.Plugin.SkinManager/Jellyfin.Plugin.SkinManager.csproj

@@ -3,8 +3,8 @@
   <PropertyGroup>
     <TargetFramework>netstandard2.1</TargetFramework>
     <IsPackable>true</IsPackable>
-    <AssemblyVersion>1.3.0</AssemblyVersion>
-    <FileVersion>1.3.0</FileVersion>
+    <AssemblyVersion>1.5.0</AssemblyVersion>
+    <FileVersion>1.5.0</FileVersion>
     <Authors />
     <Company />
   </PropertyGroup>

README.md

@@ -1,4 +1,4 @@
-<h1 align="center">Jellyfin Theme Songs Plugin</h1>
+<h1 align="center">Jellyfin Skin Manager Plugin</h1>
 <h3 align="center">Part of the <a href="https://jellyfin.media">Jellyfin Project</a></h3>
 
 <p align="center">
@@ -6,8 +6,26 @@ Jellyfin Skin Manager is a plugin that helps you to download and install skins;
 
 </p>
 
+## Install Process
 
 
+## From Repository
+1. In jellyfin, go to dashboard -> plugins -> Repositories -> add and paste this link https://raw.githubusercontent.com/danieladov/JellyfinPluginManifest/master/manifest.json
+2. Go to Catalog and search for Skin Manager
+3. Click on it and install
+4. Restart Jellyfin
+
+
+## From .zip file
+1. Download the .zip file from release page.
+2. Extract it and place the .dll file in a folder called ```plugins/SkinManager``` under  the program data directory or inside the portable install directory.
+3. Restart Jellyfin.
+
+## User Guide
+1. Go to Plugins, click on Skin Manager.
+2. Select the skin you want to install.
+3. Click set skin.
+
 
 
 ## Build Process
@@ -20,3 +38,37 @@ dotnet publish --configuration Release --output bin
 4. Place the resulting .dll file in a folder called ```plugins/SkinManager``` under  the program data directory or inside the portable install directory
 
 
+
+## Using with reverse proxy
+When using the Nginx Reverse proxy config from the [Jellyfin docs](https://jellyfin.org/docs/general/networking/nginx.html) the theme might not work by default. (If you are using the subpath config, you can ignore all this.)
+
+Because the config includes Content-Security-Policy which reduces risk of XSS, you need to add the URL from the skin repo and the fonts to the list of allowed external sources.
+
+For example to use Kaleidochromic you need to do [this](https://github.com/CTalvio/Kaleidochromic/blob/main/README.md#using-with-reverse-proxy)
+
+
+## JSON
+  ## Skin Properties
+  - name //The name of the skin
+  - author //The author of the skin
+  - defaultCss //The base css of the skin
+  - options  //An array of options that will modified the skin
+    - ## Options Properties
+    - type //the type of the input (checkBox, number, select, colorPicker)
+    - name // the name of the option
+    - description // the description of the option
+    - css //The css code that will modified the skin $ symbols in this code will be replaced by the value selected by the user (in number, select and color picer)
+    
+    Some option have custom properties:
+    
+    - ## number properties
+      - default //Default value
+      - step //step of the input
+    - ## selector properties
+      - selections //Array of options
+        - ## selections properties
+          - name // name of the option
+          - value // value of the option
+    
+   
+

install.bat

@@ -0,0 +1,3 @@
+This will not work if you have installed jellyfin to a custom location
+dotnet publish --configuration Release --output bin
+move bin\Jellyfin.Plugin.SkinManager.dll C:\ProgramData\Jellyfin\Server\plugins\SkinManager

skins-2.0.json

@@ -0,0 +1,108 @@
+[
+  {
+    "name": "Default",
+    "author": "Jellyfin",
+    "versions": [
+      {
+        "name": "Default",
+	"description":"Default, stock, Jellyfin.",
+        "css": ""
+      }
+    ]
+  },
+  {
+    "name": "Jellyflix",
+    "author": "prayagprajapati17",
+    "versions": [
+      {
+        "name": "Default",
+	"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);"
+      }
+    ]
+  },
+  {
+    "name": "Monochromic",
+    "author": "EdgeMentality",
+    "versions": [
+      {
+        "name": "Default",
+        "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": "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": "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 - 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 - 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": "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;}"
+      }
+    ]
+  },
+  {
+    "name": "Kaleidochromic",
+    "author": "EdgeMentality",
+    "versions": [
+      {
+        "name": "Default",
+        "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;}"
+      }
+    ]
+  },
+  {
+    "name": "Novachromic",
+    "author": "EdgeMentality",
+    "versions":[
+          {
+            "name": "Default",
+            "description": "Novachromic is essentially Monochromic, but with another layer of overrides on top.",
+			"css" : "@import url('https://ctalvio.github.io/Novachromic/default_style.css');"          
+          }
+		]
+	},
+  {
+    "name": "JellySkin",
+    "author": "prayagprajapati17",
+    "versions": [
+      {
+        "name": "Default",
+	"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

@@ -0,0 +1,459 @@
+[
+  {
+    "name": "Default",
+    "author": "Jellyfin",
+    "description": "Default, stock, Jellyfin.",
+    "defaultCss": "",
+    "previews": [
+      {
+        "name": "Login Page",
+        "url": ""
+      },
+      {
+        "name": "Home/Index Page",
+        "url": ""
+      },
+      {
+        "name": "Library Page",
+        "url": ""
+      },
+      {
+        "name": "Title page",
+        "url": ""
+      }
+    ],
+    "categories": [
+      {
+        "name": "Default",
+        "options": []
+      }
+    ]
+  },
+  {
+    "name": "JellyFlix",
+    "author": "prayagprajapati17",
+    "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);",
+    "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"
+      }
+    ],
+    "categories": [
+      {
+        "name": "Default",
+        "options": []
+      }
+    ]
+  },
+  {
+    "name": "Monochromic",
+    "author": "EdgeMentality",
+    "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');",
+    "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"
+      }
+    ],
+    "categories": [
+      {
+        "name": "Default",
+        "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.",
+            "css": "@import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
+          },
+          {
+            "type": "checkBox",
+            "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'); "
+          },
+          {
+            "type": "checkBox",
+            "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');"
+          },
+          {
+            "type": "number",
+            "name": "Modify rounding",
+            "description": "Amount of rounding. Zero is none.",
+            "css": ":root {--rounding: $px;}",
+            "default": "5"
+          },
+          {
+            "type": "colorPicker",
+            "name": "Accent color",
+            "description": "Choose a custom accent color to use with the theme.",
+            "css": "@import url('https://ctalvio.github.io/Monochromic/customcolor_style.css');:root {--accent: $;}",
+            "default": ""
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "Kaleidochromic",
+    "author": "Casper Talvio",
+    "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.",
+    "defaultCss": "@import url('https://ctalvio.github.io/Kaleidochromic/default_style.css');",
+    "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"
+      }
+    ],
+    "categories": [
+      {
+        "name": "Default",
+        "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.",
+            "css": "@import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
+          },
+          {
+            "type": "checkBox",
+            "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');"
+          },
+          {
+            "type": "number",
+            "name": "Modify rounding",
+            "description": "Amount of rounding. Zero is none.",
+            "css": ":root {--rounding: $px;}",
+            "default": "12"
+          },
+          {
+            "type": "colorPicker",
+            "name": "Accent color",
+            "description": "Choose a custom accent color to use with the theme.",
+            "css": ":root {--accent: $;}",
+            "default": "#6279cd"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "Novachromic",
+    "author": "EdgeMentality",
+    "description": "Novachromic is essentially Monochromic, but with another layer of overrides on top.",
+    "defaultCss": "@import url('https://ctalvio.github.io/Novachromic/default_style.css');",
+    "previews": [
+
+      {
+        "name": "Home/Index Page",
+        "url": "https://github.com/CTalvio/Novachromic/raw/main/screenshots/one.png"
+      },
+      {
+        "name": "Library Page",
+        "url": "https://github.com/CTalvio/Novachromic/raw/main/screenshots/six.png"
+      },
+      {
+        "name": "Title page",
+        "url": "https://github.com/CTalvio/Novachromic/raw/main/screenshots/four.png"
+      },
+      {
+        "name": "Dashboard page",
+        "url": "https://github.com/CTalvio/Novachromic/raw/main/screenshots/two.png"
+      }
+    ],
+    "categories": [
+      {
+        "name": "Default",
+        "options": [
+          {
+            "type": "checkBox",
+            "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');"
+          },
+          {
+            "type": "number",
+            "name": "Modify rounding",
+            "description": "Amount of rounding. Zero is none.",
+            "css": ":root {--rounding: $px;}",
+            "default": "12"
+          },
+          {
+            "type": "colorPicker",
+            "name": "Accent color",
+            "description": "Choose a custom accent color to use with the theme.",
+            "css": ":root {--accent: $;}",
+            "default": "#ffffff"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "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');",
+    "previews": [
+      {
+        "name": "Login Page",
+        "url": "https://prayag17.github.io/JellySkin/img/login.jpg"
+      },
+      {
+        "name": "Home/Index Page",
+        "url": "https://prayag17.github.io/JellySkin/img/Home.jpg"
+      },
+      {
+        "name": "Library Page",
+        "url": "https://prayag17.github.io/JellySkin/img/Movies.jpg"
+      },
+      {
+        "name": "Title page",
+        "url": "https://prayag17.github.io/JellySkin/img/Title%20Page-Movie.jpg"
+      }
+    ],
+    "categories": [
+      {
+        "name": "Default",
+        "options": [
+          {
+            "type": "selector",
+            "name": "Gradient",
+            "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"
+              },
+              {
+                "name": "Sunset Gradient",
+                "value": "sunsetGradient"
+              },
+              {
+                "name": "Night Sky Gradient",
+                "value": "nightSkyGradient"
+              },
+              {
+                "name": "Morning Gradient",
+                "value": "morningGradient"
+              }
+            ]
+          },
+          {
+            "type":"checkBox",
+            "name":"Theme Logo",
+            "description":"Styles title page in such a way in which logos are used instead of Names.",
+            "css":"@import url('https://prayag17.github.io/JellySkin/Logo.css');"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "Custom",
+    "author": "you",
+    "description": "customize the look of jellyfin by your needs",
+    "defaultCss": "/*Custom*/",
+    "categories": [
+      {
+        "name": "Fonts",
+        "options": [
+          {
+            "type": "googleFonts",
+			"css": "/*googleFonts*/"
+          },
+          {
+            "type": "number",
+            "name": "Title Font Size",
+            "description": "Change the size of the font used at titles.",
+            "step": "0.1",
+            "css": "h1 {font-size: $em;}",
+            "default": "1.8"
+          }
+        ]
+      },
+      {
+        "name": "Home/Dashboard Page",
+        "options": [
+          {
+            "type": "checkBox",
+            "name": "Enlarge Tab Buttons",
+            "description": "Enlarges the tab buttons, suggested, genres, etc. By default they are really tiny, especially on mobile.",
+            "css": ".headerTabs.sectionTabs {text-size-adjust: 110%;  font-size: 110%;}.pageTitle {margin-top: auto; margin-bottom: auto;}.emby-tab-button {padding: 1.75em 1.7em;}"
+          }
+        ]
+      },
+      {
+        "name": "Miscellaneous",
+        "options": [
+          {
+            "type": "selector",
+            "name": "Poster card hover effect",
+            "description": "Changes the hover effect on Movie/TV show/Music poster card.",
+            "css": "",
+            "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;}.card:hover .cardBox{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;}.card:hover .cardBox{transform: translatey(-5px);box-shadow: 0px 5px 10px black;}"
+              },
+              {
+                "name": "Poster Image in and out",
+                "css": "/*Dynamic Poster effect-option3*/.card:hover .cardImageContainer{filter:background-size: 120%} .cardImageContainer{background-size: 105%;transition: all .2s;}"
+              },
+              {
+                "name": "Poster Image blur",
+                "css": "/*Dynamic Poster effect-option4*/.card:hover .cardImageContainer{filter: blur(2px);} .cardImageContainer{transition: all .2s;}"
+              }
+            ]
+          },
+          {
+            "type": "checkBox",
+            "name": "Minimal Actor's card",
+            "description": "display actor's cards in minimal and compact way",
+            "css": "/*Actors*/.card[data-type=Actor] .cardBox {background: none;position: relative;}.card[data-type=Actor] .cardScalable {height: 0;overflow: hidden;padding-top: 100%;border-radius: var(--rounding);}.card[data-type=Actor] .cardText {position: absolute;background: transparent !important;}.card[data-type=Actor] .cardImageContainer::after {content: '';background: linear-gradient(360deg, rgba(0,0,0,0.75), transparent 70%);width: 100%;bottom: 0;position: absolute;padding-top: 100%;}.card[data-type=Actor].cardText-secondary {bottom: 0%;width: -webkit-fill-available;border-radius: 0px 0px 10px 10px;height: 22px;}.card[data-type=Actor] .cardText-first {bottom: 23.5px;width: -webkit-fill-available;height: 22px;}.layout-mobile .card[data-type=Actor] .cardText-first {color: white !important;}.card[data-type=Actor] .cardScalable {overflow: hidden;border-radius: var(--rounding);height: 3rem;}.card[data-type=Actor] .cardOverlayButton-br {position: absolute;bottom: 23% !important;right: 0 !important;}.card[data-type=Actor] .cardPadder {background: none;}.card[data-type=Actor] .cardImageIcon {bottom: 41%;position: absolute;left: 50%;transform: translateX(-50%);}"
+          },
+          {
+            "type": "selector",
+            "name": "Episode View",
+            "description": "Theme episode list",
+            "selections": [
+              {
+                "name": "Card",
+                "css": " #itemDetailPage .vertical-list {display: grid;grid-template-columns: 30% 30% 30%;padding: 0 6px !important;height: fit-content;justify-content: space-evenly;-webkit-box-orient: horizontal;-webkit-box-direction: normal;margin: -6px;width: calc(100% - 6px);}.listItem-withContentWrapper:hover .listItemImageButton.itemAction.paper-icon-button-light {opacity: 100%;}@media (max-width: 901px){#itemDetailPage .vertical-list {grid-template-columns: 30% 30%;}}.listItem-withContentWrapper {transition: none;height: fit-content;max-width: 100%;margin: 6px;border-radius: var(--rounding);overflow: hidden;padding: 0;overflow: hidden;}.listItem-withContentWrapper:hover{background: transparent;}.listItem-content {height: 100%;}.listItem-content {display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;width: 100%;display: grid;grid-template-columns: 100%;}.listItemImage.listItemImage-large.itemAction.lazy {height: 14rem;width: 100%;padding: 0 !important;margin: 0 !important;top: 0;left: 0;}.layout-mobile #itemDetailPage .vertical-list {grid-template-columns: 100%;}.secondary.listItem-overview.listItemBodyText {height: fit-content;}.layout-mobile .listItem-bottomoverview {padding: 0 10px;}.listItemBody.itemAction {padding: 0 5px;}.listItemImageButton.itemAction.paper-icon-button-light {opacity: 0;color: var(--accent);transition: all .2s;}.layout-mobile .listItemImageButton.itemAction.paper-icon-button-light{opacity: 100% !important;}"
+              },
+              {
+                "name": "Compact List",
+                "css": ".listItemImage.listItemImage-large.itemAction.lazy {height: 110px;}.listItem-content {height: 115px;}.secondary.listItem-overview.listItemBodyText {height: 61px;margin: 0;}"
+              }
+            ]
+          },
+          {
+            "type": "checkBox",
+            "name": "Blur episode thumbnail",
+            "description": "Blur episode thumbnail to prevent spoiler. Note: Doesn't in browser's that dont support backdrop-filter, i.e firefox(can be enabled though), opera and more(unknown).",
+            "css": " .nextUpSection.verticalSection.detailVerticalSection>div>div>div>div.cardScalable>button {filter: blur(10px);}div.listItem>div>div>button:nth-child(1) {transition: none !important;border-radius: 0px;height: 100%;width: 100%;backdrop-filter: blur(10px);}div.listItem>div>div>button:nth-child(1):hover {transition: none !important;border-radius: 0px;height: 100%;width: 100%;backdrop-filter: blur(10px);}#childrenContent>div>div>div>div.listItemImage.listItemImage large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast>button {transition: none !important;border-radius: 0px;height: 100%;width: 100%;backdrop-filter: blur(10px);}#childrenContent>div>div>div>div.listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast>button:hover {border-radius: 0px;height: 85%;width: 85%;backdrop-filter: blur(20px);}@supports not ( (backdrop-filter: blur(10px)) or (--webkit-backdrop-filter: blur(10px))) {#childrenContent>div>div>div>div.listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast {filter: blur(10px);}}@supports not ( (backdrop-filter: blur(10px)) or (--webkit-backdrop-filter: blur(10px))) {#itemDetailPage>div.detailPageWrapperContainer>div.detailPageSecondaryContainer>div.detailPageContent>div.verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container>div.padded-top-focusscale.padded-bottom-focusscale.emby-scroller>.itemsContainer>.card.overflowBackdropCard.card-hoverable.card-withuserdata>div>.cardScalable {background: rgba(0, 0, 0, .5);filter: blur(10px);transition: none !important;filter: blur(10px);}}#itemDetailPage>div.detailPageWrapperContainer>div.detailPageSecondaryContainer>div.detailPageContent>div.verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container>div.padded-top-focusscale.padded-bottom-focusscale.emby-scroller>.itemsContainer>.card.overflowBackdropCard.card-hoverable.card-withuserdata>div>.cardScalable>button {border-radius: 0px;height: 0%;width: 0%;background: rgba(0, 0, 0, .5);filter: blur(10px);transition: none !important;backdrop-filter: blur(10px);}.cardScalable{overflow: hidden;}"
+          },
+          {
+            "type": "checkBox",
+            "name": "Blur Dialog Background",
+            "description": "Blur Menu and dialog background. Note: Works in Chrome and Edge only, functionalty can be enable, click on help button for info.",
+            "css": ".mainDrawer {background: transparent;backdrop-filter: blur(20px);}"
+          },
+          {
+            "type": "colorPicker",
+            "mode": "hex",
+            "name": "Button text color",
+            "description": "change button's text color.",
+            "css": ".raised{color: $;}",
+            "default": "#ffffff"
+          },
+          {
+            "type": "colorPicker",
+            "mode":"hex",
+            "name": "Button background color",
+            "description": "change background color of button.",
+            "css": ".raised{background-color: $;}",
+            "default": "#303030"
+          },
+          {
+            "type": "colorPicker",
+            "mode": "hex",
+            "name": "Idle button color-foreground",
+            "description": "This modifies the color of buttons like cast and search.",
+            "css": ".paper-icon-button-light{color: $; transititon: all .2s;}",
+            "default": "#ffffff"
+          },
+          {
+            "type": "colorPicker",
+            "mode": "hex",
+            "name": "Idle button color-background",
+            "description": "This modifies the background color of buttons like cast and search.",
+            "css": ".paper-icon-button-light{background-color: $ !important; transition: all .2s;}",
+            "default": "#00FFFFFF"
+          },
+          {
+            "type": "colorPicker",
+            "mode": "hex",
+            "name": "Hover button color-foreground",
+            "description": "This modifies the color of buttons like cast and search when your cursor is on it.",
+            "css": ".paper-icon-button-light:hover{color: $ !important;}",
+            "default": "#00a4dc"
+          },
+          {
+            "type": "colorPicker",
+            "mode": "hex",
+            "name": "Hover button color-background",
+            "description": "This modifies the background color of buttons like cast and search when your cursor is on it.",
+            "css": ".paper-icon-button-light:hover{background-color: $ !important;}",
+            "default": "#00a4dc"
+          },
+          {
+            "type": "number",
+            "name": "Border Radius",
+            "description": "Change the rounding",
+            "css": "*,*::before,*::after{border-radius: $ !important;}",
+            "default": "0"
+          },
+          {
+            "type": "blurSlider",
+            "name": "Backdrop Blur",
+            "description": "adds blur to the backdrop images default is zero",
+            "css": ":root{--bgblur: blur($px)}.backdropImage {filter: var(--bgblur);}.backgroundContainer.withBackdrop {background-color: rgba(0,0,0,0);}",
+            "default": "0"
+          }
+        ]
+      }
+    ]
+  }
+]

skins.json

@@ -1,4 +1,10 @@
 [
+	{
+		"name":"Default",
+		"author":"Jellyfin",
+		"css": ""
+
+	},
 	{
 		"name":"Jellyflix",
 		"author":"prayagprajapati17",
@@ -24,4 +30,4 @@
 		"css": "@import url('https://prayag17.github.io/JellySkin/default.css');"
 
 	}
-]
+]

src/bgBlur.css

@@ -0,0 +1,8 @@
+:root{--bgblur: blur($px)}
+/*Blur backdrops, feel free to edit the intensity of the filter values*/
+.backdropImage {
+  filter: var(--bgblur);
+}
+.backgroundContainer.withBackdrop {
+  background-color: rgba(0,0,0,0);
+}

src/border-radius.css

@@ -0,0 +1,75 @@
+/*Setting border Radius*/
+:root {--rounding: 0px;}
+/*Rounded corners on pretty much everything-Source Monochromic*/
+.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);
+}

src/html/about.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Skin Manager-About</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="icon" href="https://jellyfin.org/favicon.ico">
+</head>
+<body>
+  <div class="header" align="center">
+    <div class="innerHeader nav">
+      <a href="https://github.com/danieladov/jellyfin-plugin-skin-manager" class="link text"><li>See on Github</li></a>
+      <a href="https://github.com/danieladov/jellyfin-plugin-skin-manager/issues" class="link text"><li>Request a skin</li></a>
+      <a href="https://prayag17.github.io/jellyfin-plugin-skin-manager/" class="link text"><li class="selected">About</li></a>
+      <a href="https://jellyfin.org" class="logo link"><li><img src="https://jellyfin.org/images/banner-dark.svg" style="size: 1em;height: 50px;max-width: 80%;float: right;z-index: 1;"></li></a>
+    </div>
+  </div>
+  <div class="body">
+    <div class="About">
+      <div class="inner">
+        <h1>About Skin Manager</h1>
+        <div class="description">
+          <p>
+            This plugin is used to create custom skins and also give you (the user) few great community Skins. You can add more skins by clicking on the "Request a Skin" button.
+          </p>
+        </div>
+      </div>
+      <div class="contributorsCont">
+        <fieldset>
+          <h3>Contributors</h3>
+          <p>The people who have helped in the development of this plugin are listed below</p>
+          <div class="cont">
+            <a href="https://github.com/danieladov" class="contributorsLink">
+              <div class="contibutorsNames" style="background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars2.githubusercontent.com/u/29411250?s=400&v=4);">
+                <div class="top">
+                  <h3>Daniel Álvarez</h3>
+                </div>@danieladov
+                <p class="description">
+                  He is the creator of 3 Plugins for Jellyfin, namely- Merge Songs, Theme Music and Skin Manager
+                </p>
+              </div>
+            </a>
+            <a href="https://github.com/prayag17" class="contributorsLink">
+              <div class="contibutorsNames" style="margin-left: 3em;background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars1.githubusercontent.com/u/55829513?s=460&u=3f232a3900ade07490ae8bdadd62ec5d0e9e4ecf&v=4);">
+                <div class="top">
+                  <h3>Prayag Prajapati</h3>
+                </div>@prayag17
+                <p class="description">
+                  He is the creator of 2 jellyfin Skins, namely- JellySkin and JellyFlix. He has helped in creating the "Custom" option in this plugin.
+                </p>
+              </div>
+            </a>
+            <a href="https://github.com/prayag17" class="contributorsLink">
+              <div class="contibutorsNames" style="margin-left: 3em;background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars2.githubusercontent.com/u/4365015?s=400&v=4);">
+                <div class="top">
+                  <h3>Casper Talvio</h3>
+                </div>@CTalvio
+                <p class="description">
+                  He is the creator of 2 jellyfin Skins namely- Monochromic and Kaleidochromic.
+                </p>
+              </div>
+            </a>
+          </div>
+        </fieldset>
+      </div>
+    </div>
+  </body>
+  </html>

src/html/help.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Skin Manager-Help</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="icon" href="https://jellyfin.org/favicon.ico">
+</head>
+<body>
+  <div class="header" align="center">
+    <div class="innerHeader nav">
+      <a href="https://github.com/danieladov/jellyfin-plugin-skin-manager" class="link text"><li>See on Github</li></a>
+      <a href="https://github.com/danieladov/jellyfin-plugin-skin-manager/issues" class="link text"><li>Request a skin</li></a>
+      <a href="https://prayag17.github.io/jellyfin-plugin-skin-manager/src/html/about.html#" class="link text"><li>About</li></a>
+      <a href="https://jellyfin.org" class="logo link"><li><img src="https://jellyfin.org/images/banner-dark.svg" style="size: 1em;height: 50px;max-width: 80%;float: right;z-index: 1;"></li></a>
+    </div>
+  </div>
+  <div class="body" style="color: #3a3a3a !important;">
+    <div class="skinRequest">
+      <fieldset>
+        <h1>How To request a new Skin</h1>
+        <div class="internal">
+          <h3>Steps</h3>
+          <br>
+          <ul>
+            <li>Open this<a href="https://github.com/danieladov/jellyfin-plugin-skin-manager/issues" class="link" style="color: #3a3a3a !important; text-decoration: underline;"> link </a>or click the "Request a Skin" option present in the header</li>
+            <li>Then Create a New Issue with title- <code>Skin Request:</code> Done!</li>
+          </ul>
+        </div>
+      </fieldset>
+      <fieldset>
+        <h1>How to enable bluring of background fo dialogs and episode previes for Firefox</h1>
+        <div class="internal">
+          <h3>Steps</h3>
+          <br>
+          <ul>
+            <li>go to <a href="about:config"> about:config </a>in firefox and click on "Accept the Risk and Continue".</li>
+            <li>Search for <code>layout.css.backdrop-filter.enabled</code> and change false to true.</li>
+            <li>Search for <code>gfx.webrender.all</code> and change it to true. Done!</li>
+          </ul>
+        </div>
+      </fieldset>
+    </div>
+  </div>
+</div>
+</body>
+</html>

src/html/style.css

@@ -0,0 +1,107 @@
+body{
+  margin: 0;
+  font-family: Arial;
+}
+.body {
+  margin: 2em;
+}
+.header {
+  height: 80px;
+  width: 100%;
+  background: #101010;
+  display: block;
+  top: 0;
+  position: sticky;
+}
+.innerHeader {
+  height: 100%;
+  margin: 0 1.5em;
+  display: block;
+}
+
+.nav a{
+  display: table;
+  height: 100%;
+  float: right;
+  padding: 0px 10px !important;
+}
+.nav a li {
+  vertical-align: middle;
+  display: table-cell;
+}
+fieldset {
+  border-radius: 15px;
+  background: #dadada;
+  border: none;
+  padding: 1em;
+  margin-top: 2em;
+}
+.link{
+  text-decoration: none;
+  color: white;
+}
+a.logo.link {
+  float: left;
+}
+.About {
+  margin: 2em;
+}
+.inner {
+  background: #c4c4c4;
+  padding: 1em;
+  border-radius: 15px;
+  color: #3a3a3a;
+}
+a {
+  text-decoration: none;
+  color: black;
+}
+.cont {
+  display: flex;
+}
+.contibutorsNames {
+  padding: 1em;
+  border-radius: 15px;
+  width: fit-content;
+  max-width: 10em;
+  min-width: 10em;
+  flex-wrap: wrap;
+  height: fit-content;
+  transition: all .2s;
+  max-height: 20em;
+  min-height: 15em;
+  background-size: cover !important;
+}
+.contibutorsNames:hover {
+  box-shadow: 0 3px 5px 0px #6e6e6e;
+  transform: translateY(-2px);
+}
+.contributorsLink {
+  color: #3a3a3a !important;
+}
+.text li {
+  color: #9a9a9a;
+  transition: color .25s, border .25s;
+  border-bottom: 5px solid rgba(0,0,0,0);
+}
+.text li:hover {
+  color: white !important;
+  border-bottom-color: #00a4dc !important;
+}
+.selected {
+  color: white !important;
+  border-bottom-color: #aa5cc3 !important;
+}
+img.userImg {
+  width: 50%;
+  border-radius: 15px;
+}
+code {
+  display: block !important;
+  width: fit-content;
+  background: #585858;
+  color: white;
+  padding: .5rem;
+  border-radius: 5.5px;
+  border: .5px solid #999999;
+}

src/js/FontPicker.js

@@ -0,0 +1,641 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = global || self, global.FontPicker = factory());
+}(this, (function () { 'use strict';
+
+  /*! *****************************************************************************
+  Copyright (c) Microsoft Corporation. All rights reserved.
+  Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+  this file except in compliance with the License. You may obtain a copy of the
+  License at http://www.apache.org/licenses/LICENSE-2.0
+
+  THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+  WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+  MERCHANTABLITY OR NON-INFRINGEMENT.
+
+  See the Apache Version 2.0 License for specific language governing permissions
+  and limitations under the License.
+  ***************************************************************************** */
+
+  var __assign = function() {
+      __assign = Object.assign || function __assign(t) {
+          for (var s, i = 1, n = arguments.length; i < n; i++) {
+              s = arguments[i];
+              for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+          }
+          return t;
+      };
+      return __assign.apply(this, arguments);
+  };
+
+  function __rest(s, e) {
+      var t = {};
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+          t[p] = s[p];
+      if (s != null && typeof Object.getOwnPropertySymbols === "function")
+          for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+              if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                  t[p[i]] = s[p[i]];
+          }
+      return t;
+  }
+
+  function __awaiter(thisArg, _arguments, P, generator) {
+      return new (P || (P = Promise))(function (resolve, reject) {
+          function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+          function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+          function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+          step((generator = generator.apply(thisArg, _arguments || [])).next());
+      });
+  }
+
+  function __generator(thisArg, body) {
+      var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+      return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+      function verb(n) { return function (v) { return step([n, v]); }; }
+      function step(op) {
+          if (f) throw new TypeError("Generator is already executing.");
+          while (_) try {
+              if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+              if (y = 0, t) op = [op[0] & 2, t.value];
+              switch (op[0]) {
+                  case 0: case 1: t = op; break;
+                  case 4: _.label++; return { value: op[1], done: false };
+                  case 5: _.label++; y = op[1]; op = [0]; continue;
+                  case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                  default:
+                      if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                      if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                      if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                      if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                      if (t[2]) _.ops.pop();
+                      _.trys.pop(); continue;
+              }
+              op = body.call(thisArg, _);
+          } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+          if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+      }
+  }
+
+  function styleInject(css, ref) {
+    if ( ref === void 0 ) ref = {};
+    var insertAt = ref.insertAt;
+
+    if (!css || typeof document === 'undefined') { return; }
+
+    var head = document.head || document.getElementsByTagName('head')[0];
+    var style = document.createElement('style');
+    style.type = 'text/css';
+
+    if (insertAt === 'top') {
+      if (head.firstChild) {
+        head.insertBefore(style, head.firstChild);
+      } else {
+        head.appendChild(style);
+      }
+    } else {
+      head.appendChild(style);
+    }
+
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+  }
+
+  var css = "@charset \"UTF-8\";\ndiv[id^=font-picker] {\n  position: relative;\n  display: inline-block;\n  width: 200px;\n  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n}\ndiv[id^=font-picker] * {\n  box-sizing: border-box;\n}\ndiv[id^=font-picker] p {\n  margin: 0;\n  padding: 0;\n}\ndiv[id^=font-picker] button {\n  color: inherit;\n  font-size: inherit;\n  background: none;\n  border: 0;\n  outline: none;\n  cursor: pointer;\n}\ndiv[id^=font-picker] .dropdown-button {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 35px;\n  padding: 0 10px;\n  background: #cbcbcb;\n}\ndiv[id^=font-picker] .dropdown-button:hover, div[id^=font-picker] .dropdown-button:focus {\n  background: #bebebe;\n}\ndiv[id^=font-picker] .dropdown-button .dropdown-font-name {\n  overflow: hidden;\n  white-space: nowrap;\n}\ndiv[id^=font-picker] .dropdown-icon {\n  margin-left: 10px;\n}\n@-webkit-keyframes spinner {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes spinner {\n  to {\n    transform: rotate(360deg);\n  }\n}\ndiv[id^=font-picker] .dropdown-icon.loading::before {\n  display: block;\n  width: 10px;\n  height: 10px;\n  border: 2px solid #b2b2b2;\n  border-top-color: #000000;\n  border-radius: 50%;\n  -webkit-animation: spinner 0.6s linear infinite;\n          animation: spinner 0.6s linear infinite;\n  content: \"\";\n}\ndiv[id^=font-picker] .dropdown-icon.finished::before {\n  display: block;\n  width: 0;\n  height: 0;\n  margin: 0 2px;\n  border-top: 6px solid #000000;\n  border-right: 5px solid transparent;\n  border-left: 5px solid transparent;\n  transition: transform 0.3s;\n  content: \"\";\n}\ndiv[id^=font-picker] .dropdown-icon.error::before {\n  content: \"⚠\";\n}\ndiv[id^=font-picker].expanded .dropdown-icon.finished::before {\n  transform: rotate(-180deg);\n}\ndiv[id^=font-picker].expanded ul {\n  max-height: 200px;\n}\ndiv[id^=font-picker] ul {\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  max-height: 0;\n  margin: 0;\n  padding: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  background: #eaeaea;\n  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n  transition: 0.3s;\n  -webkit-overflow-scrolling: touch;\n}\ndiv[id^=font-picker] ul li {\n  height: 35px;\n  list-style: none;\n}\ndiv[id^=font-picker] ul li button {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  padding: 0 10px;\n  white-space: nowrap;\n}\ndiv[id^=font-picker] ul li button:hover, div[id^=font-picker] ul li button:focus {\n  background: #dddddd;\n}\ndiv[id^=font-picker] ul li button.active-font {\n  background: #d1d1d1;\n}";
+  styleInject(css);
+
+  function getFontId(fontFamily) {
+      return fontFamily.replace(/\s+/g, "-").toLowerCase();
+  }
+  function validatePickerId(pickerId) {
+      if (pickerId.match(/[^0-9a-z]/i)) {
+          throw Error("The `pickerId` parameter may only contain letters and digits");
+      }
+  }
+
+  function get(url) {
+      return new Promise(function (resolve, reject) {
+          var request = new XMLHttpRequest();
+          request.overrideMimeType("application/json");
+          request.open("GET", url, true);
+          request.onreadystatechange = function () {
+              if (request.readyState === 4) {
+                  if (request.status !== 200) {
+                      reject(new Error("Response has status code " + request.status));
+                  }
+                  else {
+                      resolve(request.responseText);
+                  }
+              }
+          };
+          request.send();
+      });
+  }
+
+  var LIST_BASE_URL = "https://www.googleapis.com/webfonts/v1/webfonts";
+  function getFontList(apiKey) {
+      return __awaiter(this, void 0, void 0, function () {
+          var url, response, json, fontsOriginal;
+          return __generator(this, function (_a) {
+              switch (_a.label) {
+                  case 0:
+                      url = new URL(LIST_BASE_URL);
+                      url.searchParams.append("sort", "popularity");
+                      url.searchParams.append("key", apiKey);
+                      return [4, get(url.href)];
+                  case 1:
+                      response = _a.sent();
+                      json = JSON.parse(response);
+                      fontsOriginal = json.items;
+                      return [2, fontsOriginal.map(function (fontOriginal) {
+                              var family = fontOriginal.family, subsets = fontOriginal.subsets, others = __rest(fontOriginal, ["family", "subsets"]);
+                              return __assign(__assign({}, others), { family: family, id: getFontId(family), scripts: subsets });
+                          })];
+              }
+          });
+      });
+  }
+
+  var previewFontsStylesheet = document.createElement("style");
+  document.head.appendChild(previewFontsStylesheet);
+  function applyFontPreview(previewFont, selectorSuffix) {
+      var fontId = getFontId(previewFont.family);
+      var style = "\n\t\t\t#font-button-" + fontId + selectorSuffix + " {\n\t\t\t\tfont-family: \"" + previewFont.family + "\";\n\t\t\t}\n\t\t";
+      previewFontsStylesheet.appendChild(document.createTextNode(style));
+  }
+  function getActiveFontStylesheet(selectorSuffix) {
+      var stylesheetId = "active-font-" + selectorSuffix;
+      var activeFontStylesheet = document.getElementById(stylesheetId);
+      if (!activeFontStylesheet) {
+          activeFontStylesheet = document.createElement("style");
+          activeFontStylesheet.id = stylesheetId;
+          document.head.appendChild(activeFontStylesheet);
+      }
+      return activeFontStylesheet;
+  }
+  function applyActiveFont(activeFont, previousFontFamily, selectorSuffix) {
+      var style = "\n\t\t.apply-font" + selectorSuffix + " {\n\t\t\tfont-family: \"" + activeFont.family + "\"" + (previousFontFamily ? ", \"" + previousFontFamily + "\"" : "") + ";\n\t\t}\n\t";
+      var activeFontStylesheet = getActiveFontStylesheet(selectorSuffix);
+      activeFontStylesheet.innerHTML = style;
+  }
+
+  var PREVIEW_ATTRIBUTE_NAME = "data-is-preview";
+  function getStylesheetId(fontId) {
+      return "font-" + fontId;
+  }
+  function stylesheetExists(fontId, isPreview) {
+      var stylesheetNode = document.getElementById(getStylesheetId(fontId));
+      if (isPreview === null || isPreview === undefined) {
+          return stylesheetNode !== null;
+      }
+      return (stylesheetNode !== null &&
+          stylesheetNode.getAttribute(PREVIEW_ATTRIBUTE_NAME) === isPreview.toString());
+  }
+  function createStylesheet(fontId, isPreview) {
+      var stylesheetNode = document.createElement("style");
+      stylesheetNode.id = getStylesheetId(fontId);
+      stylesheetNode.setAttribute(PREVIEW_ATTRIBUTE_NAME, isPreview.toString());
+      document.head.appendChild(stylesheetNode);
+  }
+  function fillStylesheet(fontId, styles) {
+      var stylesheetId = getStylesheetId(fontId);
+      var stylesheetNode = document.getElementById(stylesheetId);
+      if (stylesheetNode) {
+          stylesheetNode.textContent = styles;
+      }
+      else {
+          console.error("Could not fill stylesheet: Stylesheet with ID \"" + stylesheetId + "\" not found");
+      }
+  }
+  function setStylesheetType(fontId, isPreview) {
+      var stylesheetId = getStylesheetId(fontId);
+      var stylesheetNode = document.getElementById(stylesheetId);
+      if (stylesheetNode) {
+          stylesheetNode.setAttribute(PREVIEW_ATTRIBUTE_NAME, isPreview.toString());
+      }
+      else {
+          console.error("Could not change stylesheet type: Stylesheet with ID \"" + stylesheetId + "\" not found");
+      }
+  }
+
+  function getMatches(regex, str) {
+      var matches = [];
+      var match;
+      do {
+          match = regex.exec(str);
+          if (match) {
+              matches.push(match[1]);
+          }
+      } while (match);
+      return matches;
+  }
+
+  var FONT_FACE_REGEX = /@font-face {([\s\S]*?)}/gm;
+  var FONT_FAMILY_REGEX = /font-family: ['"](.*?)['"]/gm;
+  function extractFontStyles(allFontStyles) {
+      var rules = getMatches(FONT_FACE_REGEX, allFontStyles);
+      var fontStyles = {};
+      rules.forEach(function (rule) {
+          var fontFamily = getMatches(FONT_FAMILY_REGEX, rule)[0];
+          var fontId = getFontId(fontFamily);
+          if (!(fontId in fontStyles)) {
+              fontStyles[fontId] = "";
+          }
+          fontStyles[fontId] += "@font-face {\n" + rule + "\n}\n\n";
+      });
+      return fontStyles;
+  }
+
+  var FONT_BASE_URL = "https://fonts.googleapis.com/css";
+  function getStylesheet(fonts, scripts, variants, previewsOnly) {
+      return __awaiter(this, void 0, void 0, function () {
+          var url, variantsStr, familiesStr, familyNamesConcat, downloadChars;
+          return __generator(this, function (_a) {
+              url = new URL(FONT_BASE_URL);
+              variantsStr = variants.join(",");
+              familiesStr = fonts.map(function (font) { return font.family + ":" + variantsStr; });
+              url.searchParams.append("family", familiesStr.join("|"));
+              url.searchParams.append("subset", scripts.join(","));
+              if (previewsOnly) {
+                  familyNamesConcat = fonts.map(function (font) { return font.family; }).join("");
+                  downloadChars = familyNamesConcat
+                      .split("")
+                      .filter(function (char, pos, self) { return self.indexOf(char) === pos; })
+                      .join("");
+                  url.searchParams.append("text", downloadChars);
+              }
+              url.searchParams.append("font-display", "swap");
+              return [2, get(url.href)];
+          });
+      });
+  }
+
+  function loadFontPreviews(fonts, scripts, variants, selectorSuffix) {
+      return __awaiter(this, void 0, void 0, function () {
+          var fontsArray, fontsToFetch, response, fontStyles;
+          return __generator(this, function (_a) {
+              switch (_a.label) {
+                  case 0:
+                      fontsArray = Array.from(fonts.values());
+                      fontsToFetch = fontsArray
+                          .map(function (font) { return font.id; })
+                          .filter(function (fontId) { return !stylesheetExists(fontId); });
+                      fontsToFetch.forEach(function (fontId) { return createStylesheet(fontId, true); });
+                      return [4, getStylesheet(fontsArray, scripts, variants, true)];
+                  case 1:
+                      response = _a.sent();
+                      fontStyles = extractFontStyles(response);
+                      fontsArray.forEach(function (font) {
+                          applyFontPreview(font, selectorSuffix);
+                          if (fontsToFetch.includes(font.id)) {
+                              if (!(font.id in fontStyles)) {
+                                  console.error("Missing styles for font \"" + font.family + "\" (fontId \"" + font.id + "\") in Google Fonts response");
+                                  return;
+                              }
+                              fillStylesheet(font.id, fontStyles[font.id]);
+                          }
+                      });
+                      return [2];
+              }
+          });
+      });
+  }
+  function loadActiveFont(font, previousFontFamily, scripts, variants, selectorSuffix) {
+      return __awaiter(this, void 0, void 0, function () {
+          var fontStyle;
+          return __generator(this, function (_a) {
+              switch (_a.label) {
+                  case 0:
+                      if (!stylesheetExists(font.id, false)) return [3, 1];
+                      applyActiveFont(font, previousFontFamily, selectorSuffix);
+                      return [3, 3];
+                  case 1:
+                      if (stylesheetExists(font.id, true)) {
+                          setStylesheetType(font.id, false);
+                      }
+                      else {
+                          createStylesheet(font.id, false);
+                      }
+                      return [4, getStylesheet([font], scripts, variants, false)];
+                  case 2:
+                      fontStyle = _a.sent();
+                      applyActiveFont(font, previousFontFamily, selectorSuffix);
+                      fillStylesheet(font.id, fontStyle);
+                      _a.label = 3;
+                  case 3: return [2];
+              }
+          });
+      });
+  }
+
+  var FONT_FAMILY_DEFAULT = "Open Sans";
+  var OPTIONS_DEFAULTS = {
+      pickerId: "",
+      families: [],
+      categories: [],
+      scripts: ["latin"],
+      variants: ["regular"],
+      filter: function () { return true; },
+      limit: 50,
+      sort: "alphabet",
+  };
+
+  var FontManager = (function () {
+      function FontManager(apiKey, defaultFamily, _a, onChange) {
+          if (defaultFamily === void 0) { defaultFamily = FONT_FAMILY_DEFAULT; }
+          var _b = _a.pickerId, pickerId = _b === void 0 ? OPTIONS_DEFAULTS.pickerId : _b, _c = _a.families, families = _c === void 0 ? OPTIONS_DEFAULTS.families : _c, _d = _a.categories, categories = _d === void 0 ? OPTIONS_DEFAULTS.categories : _d, _e = _a.scripts, scripts = _e === void 0 ? OPTIONS_DEFAULTS.scripts : _e, _f = _a.variants, variants = _f === void 0 ? OPTIONS_DEFAULTS.variants : _f, _g = _a.filter, filter = _g === void 0 ? OPTIONS_DEFAULTS.filter : _g, _h = _a.limit, limit = _h === void 0 ? OPTIONS_DEFAULTS.limit : _h, _j = _a.sort, sort = _j === void 0 ? OPTIONS_DEFAULTS.sort : _j;
+          if (onChange === void 0) { onChange = function () { }; }
+          this.fonts = new Map();
+          validatePickerId(pickerId);
+          this.selectorSuffix = pickerId ? "-" + pickerId : "";
+          this.apiKey = apiKey;
+          this.options = {
+              pickerId: pickerId,
+              families: families,
+              categories: categories,
+              scripts: scripts,
+              variants: variants,
+              filter: filter,
+              limit: limit,
+              sort: sort,
+          };
+          this.onChange = onChange;
+          this.addFont(defaultFamily, false);
+          this.setActiveFont(defaultFamily, false);
+      }
+      FontManager.prototype.init = function () {
+          return __awaiter(this, void 0, void 0, function () {
+              var fonts, _loop_1, this_1, i, state_1, fontsToLoad;
+              return __generator(this, function (_a) {
+                  switch (_a.label) {
+                      case 0: return [4, getFontList(this.apiKey)];
+                      case 1:
+                          fonts = _a.sent();
+                          _loop_1 = function (i) {
+                              var font = fonts[i];
+                              if (this_1.fonts.size >= this_1.options.limit) {
+                                  return "break";
+                              }
+                              if (!this_1.fonts.has(font.family) &&
+                                  (this_1.options.families.length === 0 || this_1.options.families.includes(font.family)) &&
+                                  (this_1.options.categories.length === 0 || this_1.options.categories.includes(font.category)) &&
+                                  this_1.options.scripts.every(function (script) { return font.scripts.includes(script); }) &&
+                                  this_1.options.variants.every(function (variant) { return font.variants.includes(variant); }) &&
+                                  this_1.options.filter(font) === true) {
+                                  this_1.fonts.set(font.family, font);
+                              }
+                          };
+                          this_1 = this;
+                          for (i = 0; i < fonts.length; i += 1) {
+                              state_1 = _loop_1(i);
+                              if (state_1 === "break")
+                                  break;
+                          }
+                          fontsToLoad = new Map(this.fonts);
+                          fontsToLoad["delete"](this.activeFontFamily);
+                          loadFontPreviews(fontsToLoad, this.options.scripts, this.options.variants, this.selectorSuffix);
+                          return [2, this.fonts];
+                  }
+              });
+          });
+      };
+      FontManager.prototype.getFonts = function () {
+          return this.fonts;
+      };
+      FontManager.prototype.addFont = function (fontFamily, downloadPreview) {
+          if (downloadPreview === void 0) { downloadPreview = true; }
+          var font = {
+              family: fontFamily,
+              id: getFontId(fontFamily),
+          };
+          this.fonts.set(fontFamily, font);
+          if (downloadPreview) {
+              var fontMap = new Map();
+              fontMap.set(fontFamily, font);
+              loadFontPreviews(fontMap, this.options.scripts, this.options.variants, this.selectorSuffix);
+          }
+      };
+      FontManager.prototype.removeFont = function (fontFamily) {
+          this.fonts["delete"](fontFamily);
+      };
+      FontManager.prototype.getActiveFont = function () {
+          var activeFont = this.fonts.get(this.activeFontFamily);
+          if (!activeFont) {
+              throw Error("Cannot get active font: \"" + this.activeFontFamily + "\" is not in the font list");
+          }
+          else {
+              return activeFont;
+          }
+      };
+      FontManager.prototype.setActiveFont = function (fontFamily, runOnChange) {
+          var _this = this;
+          if (runOnChange === void 0) { runOnChange = true; }
+          var previousFontFamily = this.activeFontFamily;
+          var activeFont = this.fonts.get(fontFamily);
+          if (!activeFont) {
+              throw Error("Cannot update active font: \"" + fontFamily + "\" is not in the font list");
+          }
+          this.activeFontFamily = fontFamily;
+          loadActiveFont(activeFont, previousFontFamily, this.options.scripts, this.options.variants, this.selectorSuffix).then(function () {
+              if (runOnChange) {
+                  _this.onChange(activeFont);
+              }
+          });
+      };
+      FontManager.prototype.setOnChange = function (onChange) {
+          this.onChange = onChange;
+      };
+      return FontManager;
+  }());
+
+  var FontPicker = (function () {
+      function FontPicker(apiKey, defaultFamily, _a, onChange) {
+          if (defaultFamily === void 0) { defaultFamily = FONT_FAMILY_DEFAULT; }
+          var _b = _a.pickerId, pickerId = _b === void 0 ? OPTIONS_DEFAULTS.pickerId : _b, _c = _a.families, families = _c === void 0 ? OPTIONS_DEFAULTS.families : _c, _d = _a.categories, categories = _d === void 0 ? OPTIONS_DEFAULTS.categories : _d, _e = _a.scripts, scripts = _e === void 0 ? OPTIONS_DEFAULTS.scripts : _e, _f = _a.variants, variants = _f === void 0 ? OPTIONS_DEFAULTS.variants : _f, _g = _a.filter, filter = _g === void 0 ? OPTIONS_DEFAULTS.filter : _g, _h = _a.limit, limit = _h === void 0 ? OPTIONS_DEFAULTS.limit : _h, _j = _a.sort, sort = _j === void 0 ? OPTIONS_DEFAULTS.sort : _j;
+          if (onChange === void 0) { onChange = function () { }; }
+          this.expanded = false;
+          this.closeEventListener = this.closeEventListener.bind(this);
+          this.toggleExpanded = this.toggleExpanded.bind(this);
+          var options = {
+              pickerId: pickerId,
+              families: families,
+              categories: categories,
+              scripts: scripts,
+              variants: variants,
+              filter: filter,
+              limit: limit,
+              sort: sort,
+          };
+          this.fontManager = new FontManager(apiKey, defaultFamily, options, onChange);
+          this.generateUI(sort);
+      }
+      FontPicker.prototype.generateUI = function (sort) {
+          var _this = this;
+          var selectorSuffix = this.fontManager.selectorSuffix;
+          var pickerId = "font-picker" + selectorSuffix;
+          this.fontPickerDiv = document.getElementById(pickerId);
+          if (!this.fontPickerDiv) {
+              throw Error("Missing div with id=\"" + pickerId + "\"");
+          }
+          var dropdownButton = document.createElement("button");
+          dropdownButton.classList.add("dropdown-button");
+          dropdownButton.onclick = this.toggleExpanded;
+          dropdownButton.onkeypress = this.toggleExpanded;
+          dropdownButton.type = "button";
+          this.fontPickerDiv.appendChild(dropdownButton);
+          this.dropdownFamily = document.createElement("p");
+          this.dropdownFamily.textContent = this.fontManager.getActiveFont().family;
+          this.dropdownFamily.classList.add("dropdown-font-family");
+          dropdownButton.appendChild(this.dropdownFamily);
+          var dropdownIcon = document.createElement("p");
+          dropdownIcon.classList.add("dropdown-icon", "loading");
+          dropdownButton.appendChild(dropdownIcon);
+          this.fontManager
+              .init()
+              .then(function (fontMap) {
+              var fonts = Array.from(fontMap.values());
+              if (sort === "alphabet") {
+                  fonts.sort(function (font1, font2) {
+                      return font1.family.localeCompare(font2.family);
+                  });
+              }
+              _this.generateFontList(fonts);
+              dropdownIcon.classList.replace("loading", "finished");
+          })["catch"](function (err) {
+              dropdownIcon.classList.replace("loading", "error");
+              console.error("Error trying to fetch the list of available fonts");
+              console.error(err);
+          });
+      };
+      FontPicker.prototype.generateFontList = function (fonts) {
+          var _this = this;
+          this.ul = document.createElement("ul");
+          this.ul.classList.add("font-list");
+          fonts.forEach(function (font) {
+              _this.addFontLi(font);
+          });
+          this.fontPickerDiv.appendChild(this.ul);
+          var activeFontFamily = this.fontManager.getActiveFont().family;
+          var activeFontId = getFontId(activeFontFamily);
+          var fontButtonId = "font-button-" + activeFontId + this.fontManager.selectorSuffix;
+          this.activeFontButton = document.getElementById(fontButtonId);
+          if (this.activeFontButton) {
+              this.activeFontButton.classList.add("active-font");
+          }
+          else {
+              console.error("Could not find font button with ID (" + fontButtonId + ")");
+          }
+      };
+      FontPicker.prototype.addFontLi = function (font, listIndex) {
+          var _this = this;
+          var fontId = getFontId(font.family);
+          var li = document.createElement("li");
+          li.classList.add("font-list-item");
+          var fontButton = document.createElement("button");
+          fontButton.type = "button";
+          fontButton.id = "font-button-" + fontId + this.fontManager.selectorSuffix;
+          fontButton.classList.add("font-button");
+          fontButton.textContent = font.family;
+          var onActivate = function () {
+              _this.toggleExpanded();
+              _this.setActiveFont(font.family);
+          };
+          fontButton.onclick = onActivate;
+          fontButton.onkeypress = onActivate;
+          li.appendChild(fontButton);
+          if (listIndex) {
+              this.ul.insertBefore(li, this.ul.children[listIndex]);
+          }
+          else {
+              this.ul.appendChild(li);
+          }
+      };
+      FontPicker.prototype.closeEventListener = function (e) {
+          var targetEl = e.target;
+          var fontPickerEl = document.getElementById("font-picker" + this.fontManager.selectorSuffix);
+          while (true) {
+              if (targetEl === fontPickerEl) {
+                  return;
+              }
+              if (targetEl.parentNode) {
+                  targetEl = targetEl.parentNode;
+              }
+              else {
+                  this.toggleExpanded();
+                  return;
+              }
+          }
+      };
+      FontPicker.prototype.toggleExpanded = function () {
+          if (this.expanded) {
+              this.expanded = false;
+              this.fontPickerDiv.classList.remove("expanded");
+              document.removeEventListener("click", this.closeEventListener);
+          }
+          else {
+              this.expanded = true;
+              this.fontPickerDiv.classList.add("expanded");
+              document.addEventListener("click", this.closeEventListener);
+          }
+      };
+      FontPicker.prototype.getFonts = function () {
+          return this.fontManager.getFonts();
+      };
+      FontPicker.prototype.addFont = function (fontFamily, index) {
+          if (Array.from(this.fontManager.getFonts().keys()).includes(fontFamily)) {
+              throw Error("Did not add font to font picker: Font family \"" + fontFamily + "\" is already in the list");
+          }
+          this.fontManager.addFont(fontFamily, true);
+          var font = this.fontManager.getFonts().get(fontFamily);
+          if (font) {
+              this.addFontLi(font, index);
+          }
+          else {
+              console.error("Font \"" + fontFamily + "\" is missing in font list");
+          }
+      };
+      FontPicker.prototype.removeFont = function (fontFamily) {
+          this.fontManager.removeFont(fontFamily);
+          var fontId = getFontId(fontFamily);
+          var fontButton = document.getElementById("font-button-" + fontId + this.fontManager.selectorSuffix);
+          if (fontButton) {
+              var fontLi = fontButton.parentElement;
+              fontButton.remove();
+              if (fontLi) {
+                  fontLi.remove();
+              }
+          }
+          else {
+              throw Error("Could not remove font from font picker: Font family \"" + fontFamily + "\" is not in the list");
+          }
+      };
+      FontPicker.prototype.getActiveFont = function () {
+          return this.fontManager.getActiveFont();
+      };
+      FontPicker.prototype.setActiveFont = function (fontFamily) {
+          this.fontManager.setActiveFont(fontFamily);
+          var fontId = getFontId(fontFamily);
+          this.dropdownFamily.textContent = fontFamily;
+          if (this.activeFontButton) {
+              this.activeFontButton.classList.remove("active-font");
+              this.activeFontButton = document.getElementById("font-button-" + fontId + this.fontManager.selectorSuffix);
+              this.activeFontButton.classList.add("active-font");
+          }
+          else {
+              console.error("`activeFontButton` is undefined");
+          }
+      };
+      FontPicker.prototype.setOnChange = function (onChange) {
+          this.fontManager.setOnChange(onChange);
+      };
+      return FontPicker;
+  }());
+
+  return FontPicker;
+
+})));