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.4.0</AssemblyVersion>
+    <AssemblyVersion>1.5.0</AssemblyVersion>
-    <FileVersion>1.4.0</FileVersion>
+    <FileVersion>1.5.0</FileVersion>
     <Authors />
     <Company />
   </PropertyGroup>

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

@@ -83,6 +83,17 @@
       }
     ]
   },
+  {
+    "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",

skins-3.0.json

@@ -4,8 +4,7 @@
     "author": "Jellyfin",
     "description": "Default, stock, Jellyfin.",
     "defaultCss": "",
-    "options": [],
+    "previews": [
-	"previews":[
       {
         "name": "Login Page",
         "url": ""
@@ -22,6 +21,12 @@
         "name": "Title page",
         "url": ""
       }
+    ],
+    "categories": [
+      {
+        "name": "Default",
+        "options": []
+      }
     ]
   },
   {
@@ -29,8 +34,7 @@
     "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);",
-    "options": [],
+    "previews": [
-    "previews":[
       {
         "name": "Login Page",
         "url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/LoginMan.png?raw=true"
@@ -47,6 +51,12 @@
         "name": "Title page",
         "url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/TV-TitlePage.png?raw=true"
       }
+    ],
+    "categories": [
+      {
+        "name": "Default",
+        "options": []
+      }
     ]
   },
   {
@@ -54,6 +64,27 @@
     "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",
@@ -87,31 +118,36 @@
             "css": "@import url('https://ctalvio.github.io/Monochromic/customcolor_style.css');:root {--accent: $;}",
             "default": ""
           }
-    ],
+        ]
-"previews":[
-		{
-			"name": "Login Page",
-			"url": "https://github.com/prayag17/jellyfin-plugin-skin-manager/blob/cssEditor/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://github.com/prayag17/jellyfin-plugin-skin-manager/blob/cssEditor/Monochromic/Lib.jpg?raw=true"
-		},
-		{
-			"name": "Title page",
-			"url": "https://github.com/CTalvio/Monochromic/raw/master/screenshots/2.png"
       }
     ]
   },
   {
     "name": "Kaleidochromic",
-    "author": "EdgeMentality",
+    "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",
@@ -139,23 +175,7 @@
             "css": ":root {--accent: $;}",
             "default": "#6279cd"
           }
-    ],
+        ]
-	"previews":[
-		{
-			"name": "Login Page",
-			"url": "https://github.com/prayag17/jellyfin-plugin-skin-manager/blob/cssEditor/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"
       }
     ]
   },
@@ -183,6 +203,9 @@
         "url": "https://github.com/CTalvio/Novachromic/raw/main/screenshots/two.png"
       }
     ],
+    "categories": [
+      {
+        "name": "Default",
         "options": [
           {
             "type": "checkBox",
@@ -205,54 +228,71 @@
             "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');",
-    "options": [
+    "previews": [
-      {
-        "type": "checkBox",
-        "name": "Sea Gradient",
-        "description": "changes the Jellyfin themed Hover gradient",
-        "css": "@import url('https://prayag17.github.io/JellySkin/seaGradient.css');"
-      },
-      {
-        "type": "checkBox",
-        "name": "Sunset Gradient",
-        "description": "changes the Jellyfin themed Hover gradient",
-        "css": "@import url('https://prayag17.github.io/JellySkin/sunsetGradient.css');"
-      },
-      {
-        "type": "checkBox",
-        "name": "Night Sky Gradient",
-        "description": "changes the Jellyfin themed Hover gradient",
-        "css": "@import url('https://prayag17.github.io/JellySkin/nightSkyGradient.css');"
-      },
-      {
-        "type": "checkBox",
-        "name": "Morning Gradient",
-        "description": "changes the Jellyfin themed Hover gradient",
-        "css": "@import url('https://prayag17.github.io/JellySkin/morningGradient.css');"
-      }
-    ],
-	"previews":[
       {
         "name": "Login Page",
-			"url": "https://github.com/prayag17/JellySkin/raw/master/Version%204/Login.png?raw=true"
+        "url": "https://prayag17.github.io/JellySkin/img/login.jpg"
       },
       {
         "name": "Home/Index Page",
-			"url": "https://github.com/prayag17/JellySkin/raw/master/Version%204/Home.png?raw=true"
+        "url": "https://prayag17.github.io/JellySkin/img/Home.jpg"
       },
       {
         "name": "Library Page",
-			"url": "https://github.com/prayag17/JellySkin/raw/master/Version%204/lib%202.png?raw=true"
+        "url": "https://prayag17.github.io/JellySkin/img/Movies.jpg"
       },
       {
         "name": "Title page",
-			"url": "https://github.com/prayag17/JellySkin/raw/master/Version%204/title%201.png?raw=true"
+        "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');"
+          }
+        ]
       }
     ]
   },
@@ -260,48 +300,14 @@
     "name": "Custom",
     "author": "you",
     "description": "customize the look of jellyfin by your needs",
-    "defaultCss": "",
+    "defaultCss": "/*Custom*/",
+    "categories": [
+      {
+        "name": "Fonts",
         "options": [
           {
-        "type": "selector",
+            "type": "googleFonts",
-        "name": "Change Font",
+			"css": "/*googleFonts*/"
-        "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"
-          },
-          {
-            "name": "Times New Roman"
-          },
-          {
-            "name": "Arial"
-          },
-          {
-            "name": "Helvetica"
-          },
-          {
-            "name": "Times"
-          },
-          {
-            "name": "Courier New"
-          },
-          {
-            "name": "Verdana"
-          },
-          {
-            "name": "Courier"
-          },
-          {
-            "name": "Arial Narrow"
-          },
-          {
-            "name": "Candara"
-          },
-          {
-            "name": "Poppins"
-          }
-        ]
           },
           {
             "type": "number",
@@ -310,59 +316,137 @@
             "step": "0.1",
             "css": "h1 {font-size: $em;}",
             "default": "1.8"
+          }
+        ]
       },
       {
-        "type": "colorPicker",
+        "name": "Home/Dashboard Page",
-        "mode":"rgba",
+        "options": [
-        "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;}"
-      },
-      {
-        "type": "colorPicker",
-        "mode": "hex",
-        "name": "Console Panel Color",
-        "description": "Modifies the color of the left menu panel.",
-        "css": ".mainDrawer-scrollContainer { color: $; }",
-        "default":"#ffffff"
-      },
           {
             "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": "Stylized Episode Previews",
+            "name": "Minimal Actor's card",
-        "description": "The episode previews in season view are sized based on horizontal resolution. This leads to a lot of wasted space on the episode summary and a high vertical page, which requires a lot of scrolling. This code reduces the height of episode entries, which solves both problems.",
+            "description": "display actor's cards in minimal and compact way",
-        "css": "/* Size episode preview images in a more compact way */.listItemImage.listItemImage-large.itemAction.lazy {height: 110px;}.listItem-content {height: 115px;}.secondary.listItem-overview.listItemBodyText {height: 61px; margin: 0;}"
+            "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": "Custom Background Color",
+            "name": "Button text color",
-        "description": "Change background color.",
+            "description": "change button's text color.",
-        "css": ".backgroundContainer, .dialog, html { background-color: $;}",
+            "css": ".raised{color: $;}",
-        "default": "#000000"
+            "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": "Right Header Color",
+            "name": "Idle button color-foreground",
-        "description": "This modifies the colors of the cast, search and user buttons in the top right.",
+            "description": "This modifies the color of buttons like cast and search.",
-        "css": ".headerRight { color: $; }",
+            "css": ".paper-icon-button-light{color: $; transititon: all .2s;}",
-        "default":"#ffffff"
+            "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": ":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);}",
+            "description": "Change the rounding",
-        "css": "",
+            "css": "*,*::before,*::after{border-radius: $ !important;}",
-        "default":"0"
+            "default": "0"
           },
           {
-        "type": "number",
+            "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);}",
@@ -370,4 +454,6 @@
           }
         ]
       }
+    ]
+  }
 ]

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;
+
+})));