Added ultrachromic and new color picked mode
This commit is contained in:
Daniel
@@ -433,7 +433,19 @@
|
||||
for (var i = 0; i < inputs.length; i++) {
|
||||
var element = inputs[i]
|
||||
var values = $("#" + element.name).spectrum("get")
|
||||
var color = "rgba(" + values._r + "," + values._g + "," + values._b + "," + values._a + ")"
|
||||
var mode = element.getAttribute("data-mode");
|
||||
var color = "";
|
||||
switch (mode) {
|
||||
case "hex":
|
||||
color = "#" + values.toHex();
|
||||
break;
|
||||
case "only_numbers":
|
||||
color = values._r + "," + values._g + "," + values._b ;
|
||||
break;
|
||||
default:
|
||||
color = "rgba(" + values._r + "," + values._g + "," + values._b + "," + values._a + ")";
|
||||
break;
|
||||
}
|
||||
css += element.getAttribute("data-css").replaceAll("$", color) + "\n";
|
||||
}
|
||||
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
<PropertyGroup>
|
||||
<TargetFramework>netstandard2.1</TargetFramework>
|
||||
<IsPackable>true</IsPackable>
|
||||
<AssemblyVersion>1.5.0</AssemblyVersion>
|
||||
<FileVersion>1.5.0</FileVersion>
|
||||
<AssemblyVersion>2.0.1</AssemblyVersion>
|
||||
<FileVersion>2.0.1</FileVersion>
|
||||
<Authors />
|
||||
<Company />
|
||||
</PropertyGroup>
|
||||
|
||||
340
skins-3.0.json
340
skins-3.0.json
@@ -32,19 +32,19 @@
|
||||
"defaultCss": "@import url('https://prayag17.github.io/JellySkin/default.css');",
|
||||
"previews": [{
|
||||
"name": "Login Page",
|
||||
"url": "https://prayag17.github.io/JellySkin/img/login.jpg"
|
||||
"url": "https://cdn.jsdelivr.net/gh/prayag17/JellySkin/img/login.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Home/Index Page",
|
||||
"url": "https://prayag17.github.io/JellySkin/img/Home.jpg"
|
||||
"url": "https://cdn.jsdelivr.net/gh/prayag17/JellySkin/img/Home.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Library Page",
|
||||
"url": "https://prayag17.github.io/JellySkin/img/Movies.jpg"
|
||||
"url": "https://cdn.jsdelivr.net/gh/prayag17/JellySkin/img/Movies.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Title page",
|
||||
"url": "https://prayag17.github.io/JellySkin/img/Title%20Page-Movie.jpg"
|
||||
"url": "https://cdn.jsdelivr.net/gh/prayag17/JellySkin/img/Title%20Page-Movie.jpg"
|
||||
}
|
||||
],
|
||||
"categories": [{
|
||||
@@ -53,33 +53,33 @@
|
||||
"type": "selector",
|
||||
"name": "Gradient",
|
||||
"description": "Changes the Jellyfin themed Hover gradient",
|
||||
"css": "@import url('https://prayag17.github.io/JellySkin/$.css');",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/prayag17/JellySkin/$.css');",
|
||||
"selections": [{
|
||||
"name": "Default",
|
||||
"value": "",
|
||||
"css": "@import url('https://prayag17.github.io/JellySkin/default.css');"
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/prayag17/JellySkin/default.css');"
|
||||
},
|
||||
{
|
||||
"name": "Sea Gradient",
|
||||
"value": "seaGradient",
|
||||
"css": "@import url('https://prayag17.github.io/JellySkin/seaGradient.css');"
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/prayag17/JellySkin/addons/Gradients/seaGradient.css');"
|
||||
},
|
||||
{
|
||||
"name": "Sunset Gradient",
|
||||
"value": "sunsetGradient",
|
||||
"css": "@import url('https://prayag17.github.io/JellySkin/sunsetGradient.css');"
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/prayag17/JellySkin/addons/Gradients/sunsetGradient.css');"
|
||||
|
||||
},
|
||||
{
|
||||
"name": "Mauve Gradient",
|
||||
"value": "morningGradient",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/prayag17/JellySkin/addons/Gradients/mauveGradient.css');"
|
||||
|
||||
},
|
||||
{
|
||||
"name": "Night Sky Gradient",
|
||||
"value": "nightSkyGradient",
|
||||
"css": "@import url('https://prayag17.github.io/JellySkin/nightSkyGradient.css');"
|
||||
|
||||
},
|
||||
{
|
||||
"name": "Morning Gradient",
|
||||
"value": "morningGradient",
|
||||
"css": "@import url('https://prayag17.github.io/JellySkin/morningGradient.css');"
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/prayag17/JellySkin/addons/Gradients/nightSkyGradient.css');"
|
||||
|
||||
}
|
||||
]
|
||||
@@ -88,7 +88,7 @@
|
||||
"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');"
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/prayag17/JellySkin/addons/Logo.css');"
|
||||
}
|
||||
]
|
||||
}]
|
||||
@@ -97,22 +97,22 @@
|
||||
"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);",
|
||||
"defaultCss": "@import url(https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/default.css);",
|
||||
"previews": [{
|
||||
"name": "Login Page",
|
||||
"url": "https://prayag17.github.io/JellyFlix/img/Login.jpg"
|
||||
"url": "https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/img/Login.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Home/Index Page",
|
||||
"url": "https://prayag17.github.io/JellyFlix/img/Home.jpg"
|
||||
"url": "https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/img/Home.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Library Page",
|
||||
"url": "https://prayag17.github.io/JellyFlix/img/Movies.jpg"
|
||||
"url": "https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/img/Movies.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Title page",
|
||||
"url": "https://prayag17.github.io/JellyFlix/img/Title%20Page-TV.jpg"
|
||||
"url": "https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/img/Title%20Page-TV.jpg"
|
||||
}
|
||||
],
|
||||
"categories": [{
|
||||
@@ -121,15 +121,304 @@
|
||||
"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/JellyFlix/Logo.css');"
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/addons/Logo.css');"
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
"name": "Ultrachromic",
|
||||
"author": "Casper Talvio",
|
||||
"description": "The final form, the true evolution of the chromic theme saga! The old trilogy of chromic themes are deprecated, as their appearances can be replicated using Ultrachromic.",
|
||||
"defaultCss": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css');@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/accentlist.css');",
|
||||
"previews": [{
|
||||
"name": "Login Page",
|
||||
"url": "https://user-images.githubusercontent.com/4365015/127768970-e827c7e4-f4ce-4229-a68a-b2e87a723ef0.png"
|
||||
},
|
||||
{
|
||||
"name": "Home/Index Page",
|
||||
"url": "https://user-images.githubusercontent.com/4365015/127774204-03957527-7178-4ea2-8674-d83fe6a97d1c.png"
|
||||
},
|
||||
{
|
||||
"name": "Library Page",
|
||||
"url": "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/src/img/Monochromic/Lib.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Title page",
|
||||
"url": "https://user-images.githubusercontent.com/4365015/127778994-ddee8235-6bb2-42ae-a8b1-f9023dc69398.png"
|
||||
}
|
||||
],
|
||||
"categories": [{
|
||||
"name": "Customization Details",
|
||||
"description": "Recommended only with the Custom theme. Not guaranteed to work with the presets.",
|
||||
"options": [{
|
||||
"type": "checkBox",
|
||||
"name": "Recommended Fixes",
|
||||
"description": "Contains various small tweaks all over the JF UI, an alignment here, a size tweak there.",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css');"
|
||||
},
|
||||
{
|
||||
"type": "checkBox",
|
||||
"name": "Jellyfin Fonts",
|
||||
"description": "Make Jellyfin use the same font as its logo, for everything.",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/jf_font.css');"
|
||||
},
|
||||
{
|
||||
"type": "selector",
|
||||
"name": "Rounding",
|
||||
"description": "Circlehover keeps the stock circle accent when hovering over things, otherwise the accent will be a rounded square like everythig else.",
|
||||
"css": "/* Rounding */",
|
||||
"selections": [{
|
||||
"name": "Default",
|
||||
"value": "default",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css');"
|
||||
},
|
||||
{
|
||||
"name": "Circlehover",
|
||||
"value": "circlehover",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding_circlehover.css');"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "checkBox",
|
||||
"name": "Smaller Cast List",
|
||||
"description": "A smaller, square aspect ratio style cast list.",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/smallercast.css');"
|
||||
},
|
||||
{
|
||||
"type": "selector",
|
||||
"name": "Compact episode list",
|
||||
"description": "A more easily scrolled episode list, there is the option to keep it as a list that is more compact, or turning the episode list into a grid menu.",
|
||||
"css": "/* Compact list */",
|
||||
"selections": [{
|
||||
"name": "Compact List",
|
||||
"value": "compactlist",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_compactlist.css');"
|
||||
},
|
||||
{
|
||||
"name": "Grid",
|
||||
"value": "grid",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_grid.css');"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "checkBox",
|
||||
"name": "Transparent Top Bar",
|
||||
"description": "Transparent top bar.",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent.css');"
|
||||
},
|
||||
{
|
||||
"type": "selector",
|
||||
"name": "Login Screen",
|
||||
"description": "Login screen styles. The minimalistic option has no frame or prompt text.",
|
||||
"css": "/* Login frame */",
|
||||
"selections": [{
|
||||
"name": "Login Frame",
|
||||
"value": "loginframe",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_frame.css');"
|
||||
},
|
||||
{
|
||||
"name": "Login Minimalistic",
|
||||
"value": "loginminimalistic",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_minimalistic.css');"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "selector",
|
||||
"name": "Input fields",
|
||||
"description": "Input field styles, with borders that highlight when selected, or with no borders, and the background highlights, when selected.",
|
||||
"css": "/* Input fields */",
|
||||
"selections": [{
|
||||
"name": "Border",
|
||||
"value": "fieldsborder",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_border.css');"
|
||||
},
|
||||
{
|
||||
"name": "No Border",
|
||||
"value": "fieldsnoborder",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_noborder.css');"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "selector",
|
||||
"name": "Watched/Unwatched indicators",
|
||||
"description": "Two options, should the indicator be floating, or attached to the corner of the title card.",
|
||||
"css": "/* Watched/Unwatched */",
|
||||
"selections": [{
|
||||
"name": "Floating",
|
||||
"value": "indicatorfloating",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_floating.css');"
|
||||
},
|
||||
{
|
||||
"name": "Corner",
|
||||
"value": "indicatorcorner",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_corner.css');"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "selector",
|
||||
"name": "Theme",
|
||||
"description": "Dark, light, and colorful type.",
|
||||
"css": "/* Theme */",
|
||||
"selections": [{
|
||||
"name": "Dark",
|
||||
"value": "darktheme",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark.css');"
|
||||
},
|
||||
{
|
||||
"name": "White",
|
||||
"value": "whitetheme",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/light.css');"
|
||||
},
|
||||
{
|
||||
"name": "Colorful",
|
||||
"value": "colorfultheme",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/colorful.css');"
|
||||
},
|
||||
{
|
||||
"name": "Dark with Accent",
|
||||
"value": "darkwithaccenttheme",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark_withaccent.css');"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "selector",
|
||||
"name": "Title Page",
|
||||
"description": "Four options, two versions, each version can be used with or without a logo replacing title text.",
|
||||
"css": "/* Title page */",
|
||||
"selections": [{
|
||||
"name": "Simple",
|
||||
"value": "titlesimple",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple.css');"
|
||||
},
|
||||
{
|
||||
"name": "Simple with Logo",
|
||||
"value": "titlesimplelogo",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple-logo.css');"
|
||||
},
|
||||
{
|
||||
"name": "Banner",
|
||||
"value": "titlebanner",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_banner.css');"
|
||||
},
|
||||
{
|
||||
"name": "Banner with Logo",
|
||||
"value": "titlebannerlogo",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_banner-logo.css');"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "selector",
|
||||
"name": "Progress bar",
|
||||
"description": "Default, overlay or floating style progress indicator for library items.",
|
||||
"css": "/* Progress bar */",
|
||||
"selections": [{
|
||||
"name": "Overlay",
|
||||
"value": "overlayprogress",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/overlayprogress.css');"
|
||||
},
|
||||
{
|
||||
"name": "Bottom Bar",
|
||||
"value": "bottombarprogress",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/bottombarprogress.css');"
|
||||
},
|
||||
{
|
||||
"name": "Floating",
|
||||
"value": "floatingprogress",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/progress/floating.css');"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "checkBox",
|
||||
"name": "Hoverglow Effect",
|
||||
"description": "",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/hoverglow.css');"
|
||||
},
|
||||
{
|
||||
"type": "checkBox",
|
||||
"name": "Glassy Effect",
|
||||
"description": "",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/glassy.css');"
|
||||
},
|
||||
{
|
||||
"type": "checkBox",
|
||||
"name": "Pan-Animation Effect",
|
||||
"description": "Caution: Pan-animation can cause flickering on chromium based browsers when the backdrop is also modified",
|
||||
"css": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/pan-animation.css');"
|
||||
},
|
||||
{
|
||||
"type": "checkBox",
|
||||
"name": "Backdrop-Hack Effect",
|
||||
"description": "",
|
||||
"css": "@import url('https://ctalvio.github.io/Monochromic/backdrop-hack_style.css');"
|
||||
},
|
||||
{
|
||||
"type": "number",
|
||||
"name": "Modify Backdrop Blur",
|
||||
"css": ".backdropImage {filter: blur($px);}",
|
||||
"default": "18",
|
||||
"description": ""
|
||||
|
||||
},
|
||||
{
|
||||
"type": "number",
|
||||
"name": "Modify Backdrop Saturation",
|
||||
"css": ".backdropImage {filter: saturate($%);}",
|
||||
"default": "120",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"type": "number",
|
||||
"name": "Modify Backdrop Contrast",
|
||||
"css": ".backdropImage {filter: contrast($%);}",
|
||||
"default": "120",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"type": "number",
|
||||
"name": "Modify Backdrop Brightness",
|
||||
"css": ".backdropImage {filter: brightness($%);}",
|
||||
"default": "40",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "Modify Login Background url",
|
||||
"css": "#loginPage {background: url($) !important;}",
|
||||
"default": "https://i.imgur.com/9vL4iNf.png",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"type": "colorPicker",
|
||||
"name": "Modify Accent Color",
|
||||
"css": ":root {--accent: $;}",
|
||||
"mode":"only_numbers",
|
||||
"default": "#6279cd",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"type": "number",
|
||||
"name": "Modify Rounding",
|
||||
"css": ":root {--rounding: $px;}",
|
||||
"default": "12",
|
||||
"description": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"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');",
|
||||
"defaultCss": "@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/monochromic_preset.css');",
|
||||
"previews": [{
|
||||
"name": "Login Page",
|
||||
"url": "https://github.com/danieladov/jellyfin-plugin-skin-manager/blob/master/src/img/Monochromic/login.jpg?raw=true"
|
||||
@@ -177,8 +466,9 @@
|
||||
{
|
||||
"type": "colorPicker",
|
||||
"name": "Accent color",
|
||||
"mode":"only_numbers",
|
||||
"description": "Choose a custom accent color to use with the theme.",
|
||||
"css": "@import url('https://ctalvio.github.io/Monochromic/customcolor_style.css');:root {--accent: $;}",
|
||||
"css": "@import url('https://ctalvio.github.io/Monochromic/customcolor-advanced_style.css');:root {--accent: $;}",
|
||||
"default": ""
|
||||
}
|
||||
]
|
||||
@@ -230,6 +520,7 @@
|
||||
{
|
||||
"type": "colorPicker",
|
||||
"name": "Accent color",
|
||||
"mode":"only_numbers",
|
||||
"description": "Choose a custom accent color to use with the theme.",
|
||||
"css": ":root {--accent: $;}",
|
||||
"default": "#6279cd"
|
||||
@@ -279,6 +570,7 @@
|
||||
{
|
||||
"type": "colorPicker",
|
||||
"name": "Accent color",
|
||||
"mode":"only_numbers",
|
||||
"description": "Choose a custom accent color to use with the theme.",
|
||||
"css": ":root {--accent: $;}",
|
||||
"default": "#ffffff"
|
||||
|
||||
Reference in New Issue
Block a user