mirror of
https://github.com/danieladov/jellyfin-plugin-skin-manager.git
synced 2026-01-18 16:37:31 +01:00
Daniel
GitHub
884
skins-3.0.json
884
skins-3.0.json
@@ -1,459 +1,435 @@
|
|||||||
[
|
[{
|
||||||
{
|
|
||||||
"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",
|
"name": "Default",
|
||||||
"options": []
|
"author": "Jellyfin",
|
||||||
}
|
"description": "Default, stock, Jellyfin.",
|
||||||
]
|
"defaultCss": "",
|
||||||
},
|
"previews": [{
|
||||||
{
|
"name": "Login Page",
|
||||||
"name": "JellyFlix",
|
"url": ""
|
||||||
"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);",
|
"name": "Home/Index Page",
|
||||||
"previews": [
|
"url": ""
|
||||||
{
|
},
|
||||||
"name": "Login Page",
|
{
|
||||||
"url": "https://prayag17.github.io/JellyFlix/img/Login.jpg"
|
"name": "Library Page",
|
||||||
},
|
"url": ""
|
||||||
{
|
},
|
||||||
"name": "Home/Index Page",
|
{
|
||||||
"url": "https://prayag17.github.io/JellyFlix/img/Home.jpg"
|
"name": "Title page",
|
||||||
},
|
"url": ""
|
||||||
{
|
}
|
||||||
"name": "Library Page",
|
],
|
||||||
"url": "https://prayag17.github.io/JellyFlix/img/Movies.jpg"
|
"categories": [{
|
||||||
},
|
"name": "Default",
|
||||||
{
|
"options": []
|
||||||
"name": "Title page",
|
}]
|
||||||
"url": "https://prayag17.github.io/JellyFlix/img/Title%20Page-TV.jpg"
|
},
|
||||||
}
|
{
|
||||||
],
|
"name": "JellyFlix",
|
||||||
"categories": [
|
"author": "prayagprajapati17",
|
||||||
{
|
"description": "A theme that aims to replicate the red and black look of Netflix. Theme is by prayag17.",
|
||||||
"name": "Default",
|
"defaultCss": "@import url(https://prayag17.github.io/JellyFlix/default.css);",
|
||||||
"options": []
|
"previews": [{
|
||||||
}
|
"name": "Login Page",
|
||||||
]
|
"url": "https://prayag17.github.io/JellyFlix/img/Login.jpg"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Monochromic",
|
"name": "Home/Index Page",
|
||||||
"author": "EdgeMentality",
|
"url": "https://prayag17.github.io/JellyFlix/img/Home.jpg"
|
||||||
"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": "Library Page",
|
||||||
{
|
"url": "https://prayag17.github.io/JellyFlix/img/Movies.jpg"
|
||||||
"name": "Login Page",
|
},
|
||||||
"url": "https://github.com/danieladov/jellyfin-plugin-skin-manager/blob/master/src/img/Monochromic/login.jpg?raw=true"
|
{
|
||||||
},
|
"name": "Title page",
|
||||||
{
|
"url": "https://prayag17.github.io/JellyFlix/img/Title%20Page-TV.jpg"
|
||||||
"name": "Home/Index Page",
|
}
|
||||||
"url": "https://github.com/CTalvio/Monochromic/blob/master/screenshots/1.png?raw=true"
|
],
|
||||||
},
|
"categories": [{
|
||||||
{
|
"name": "Default",
|
||||||
"name": "Library Page",
|
"options": []
|
||||||
"url": "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/src/img/Monochromic/Lib.jpg"
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Title page",
|
"name": "Monochromic",
|
||||||
"url": "https://github.com/CTalvio/Monochromic/raw/master/screenshots/2.png"
|
"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');",
|
||||||
"categories": [
|
"previews": [{
|
||||||
{
|
"name": "Login Page",
|
||||||
"name": "Default",
|
"url": "https://github.com/danieladov/jellyfin-plugin-skin-manager/blob/master/src/img/Monochromic/login.jpg?raw=true"
|
||||||
"options": [
|
},
|
||||||
{
|
{
|
||||||
"type": "checkBox",
|
"name": "Home/Index Page",
|
||||||
"name": "Improve performance",
|
"url": "https://github.com/CTalvio/Monochromic/blob/master/screenshots/1.png?raw=true"
|
||||||
"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');"
|
{
|
||||||
},
|
"name": "Library Page",
|
||||||
{
|
"url": "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/src/img/Monochromic/Lib.jpg"
|
||||||
"type": "checkBox",
|
},
|
||||||
"name": "No rounded corners",
|
{
|
||||||
"description": "In fact, squares off every rounded corner JF ever had.",
|
"name": "Title page",
|
||||||
"css": "@import url('https://ctalvio.github.io/Monochromic/sharp_style.css'); "
|
"url": "https://github.com/CTalvio/Monochromic/raw/master/screenshots/2.png"
|
||||||
},
|
}
|
||||||
{
|
],
|
||||||
"type": "checkBox",
|
"categories": [{
|
||||||
"name": "Restore bottom bar style episode progress",
|
"name": "Default",
|
||||||
"description": "Don't like my transparent view progress overlay? Use this to go back to the old style.",
|
"options": [{
|
||||||
"css": "@import url('https://ctalvio.github.io/Monochromic/bottom-progress_style.css');"
|
"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.",
|
||||||
"type": "number",
|
"css": "@import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
|
||||||
"name": "Modify rounding",
|
},
|
||||||
"description": "Amount of rounding. Zero is none.",
|
{
|
||||||
"css": ":root {--rounding: $px;}",
|
"type": "checkBox",
|
||||||
"default": "5"
|
"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": "colorPicker",
|
},
|
||||||
"name": "Accent color",
|
{
|
||||||
"description": "Choose a custom accent color to use with the theme.",
|
"type": "checkBox",
|
||||||
"css": "@import url('https://ctalvio.github.io/Monochromic/customcolor_style.css');:root {--accent: $;}",
|
"name": "Restore bottom bar style episode progress",
|
||||||
"default": ""
|
"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.",
|
||||||
"name": "Kaleidochromic",
|
"css": ":root {--rounding: $px;}",
|
||||||
"author": "Casper Talvio",
|
"default": "5"
|
||||||
"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": [
|
"type": "colorPicker",
|
||||||
{
|
"name": "Accent color",
|
||||||
"name": "Login Page",
|
"description": "Choose a custom accent color to use with the theme.",
|
||||||
"url": "https://github.com/danieladov/jellyfin-plugin-skin-manager/blob/master/src/img/Kaleidochromic/Login.jpg?raw=true"
|
"css": "@import url('https://ctalvio.github.io/Monochromic/customcolor_style.css');:root {--accent: $;}",
|
||||||
},
|
"default": ""
|
||||||
{
|
}
|
||||||
"name": "Home/Index Page",
|
]
|
||||||
"url": "https://github.com/CTalvio/Kaleidochromic/raw/main/screenshots/6.png"
|
}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Library Page",
|
"name": "Kaleidochromic",
|
||||||
"url": "https://github.com/CTalvio/Kaleidochromic/raw/main/screenshots/5.png"
|
"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');",
|
||||||
"name": "Title page",
|
"previews": [{
|
||||||
"url": "https://github.com/CTalvio/Kaleidochromic/raw/main/screenshots/1.png"
|
"name": "Login Page",
|
||||||
}
|
"url": "https://github.com/danieladov/jellyfin-plugin-skin-manager/blob/master/src/img/Kaleidochromic/Login.jpg?raw=true"
|
||||||
],
|
},
|
||||||
"categories": [
|
{
|
||||||
{
|
"name": "Home/Index Page",
|
||||||
"name": "Default",
|
"url": "https://github.com/CTalvio/Kaleidochromic/raw/main/screenshots/6.png"
|
||||||
"options": [
|
},
|
||||||
{
|
{
|
||||||
"type": "checkBox",
|
"name": "Library Page",
|
||||||
"name": "Improve performance",
|
"url": "https://github.com/CTalvio/Kaleidochromic/raw/main/screenshots/5.png"
|
||||||
"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');"
|
{
|
||||||
},
|
"name": "Title page",
|
||||||
{
|
"url": "https://github.com/CTalvio/Kaleidochromic/raw/main/screenshots/1.png"
|
||||||
"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.",
|
"categories": [{
|
||||||
"css": "@import url('https://ctalvio.github.io/Monochromic/bottom-progress_style.css');"
|
"name": "Default",
|
||||||
},
|
"options": [{
|
||||||
{
|
"type": "checkBox",
|
||||||
"type": "number",
|
"name": "Improve performance",
|
||||||
"name": "Modify rounding",
|
"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.",
|
||||||
"description": "Amount of rounding. Zero is none.",
|
"css": "@import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
|
||||||
"css": ":root {--rounding: $px;}",
|
},
|
||||||
"default": "12"
|
{
|
||||||
},
|
"type": "checkBox",
|
||||||
{
|
"name": "Restore bottom bar style episode progress",
|
||||||
"type": "colorPicker",
|
"description": "Don't like my transparent view progress overlay? Use this to go back to the old style.",
|
||||||
"name": "Accent color",
|
"css": "@import url('https://ctalvio.github.io/Monochromic/bottom-progress_style.css');"
|
||||||
"description": "Choose a custom accent color to use with the theme.",
|
},
|
||||||
"css": ":root {--accent: $;}",
|
{
|
||||||
"default": "#6279cd"
|
"type": "number",
|
||||||
}
|
"name": "Modify rounding",
|
||||||
]
|
"description": "Amount of rounding. Zero is none.",
|
||||||
}
|
"css": ":root {--rounding: $px;}",
|
||||||
]
|
"default": "12"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Novachromic",
|
"type": "colorPicker",
|
||||||
"author": "EdgeMentality",
|
"name": "Accent color",
|
||||||
"description": "Novachromic is essentially Monochromic, but with another layer of overrides on top.",
|
"description": "Choose a custom accent color to use with the theme.",
|
||||||
"defaultCss": "@import url('https://ctalvio.github.io/Novachromic/default_style.css');",
|
"css": ":root {--accent: $;}",
|
||||||
"previews": [
|
"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",
|
"name": "Home/Index Page",
|
||||||
"url": "https://github.com/CTalvio/Novachromic/raw/main/screenshots/one.png"
|
"url": "https://github.com/CTalvio/Novachromic/raw/main/screenshots/one.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Library Page",
|
"name": "Library Page",
|
||||||
"url": "https://github.com/CTalvio/Novachromic/raw/main/screenshots/six.png"
|
"url": "https://github.com/CTalvio/Novachromic/raw/main/screenshots/six.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Title page",
|
"name": "Title page",
|
||||||
"url": "https://github.com/CTalvio/Novachromic/raw/main/screenshots/four.png"
|
"url": "https://github.com/CTalvio/Novachromic/raw/main/screenshots/four.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Dashboard page",
|
"name": "Dashboard page",
|
||||||
"url": "https://github.com/CTalvio/Novachromic/raw/main/screenshots/two.png"
|
"url": "https://github.com/CTalvio/Novachromic/raw/main/screenshots/two.png"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"categories": [
|
"categories": [{
|
||||||
{
|
"name": "Default",
|
||||||
"name": "Default",
|
"options": [{
|
||||||
"options": [
|
"type": "checkBox",
|
||||||
{
|
"name": "Restore bottom bar style episode progress",
|
||||||
"type": "checkBox",
|
"description": "Don't like my transparent view progress overlay? Use this to go back to the old style.",
|
||||||
"name": "Restore bottom bar style episode progress",
|
"css": "@import url('https://ctalvio.github.io/Monochromic/bottom-progress_style.css');"
|
||||||
"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",
|
||||||
"type": "number",
|
"description": "Amount of rounding. Zero is none.",
|
||||||
"name": "Modify rounding",
|
"css": ":root {--rounding: $px;}",
|
||||||
"description": "Amount of rounding. Zero is none.",
|
"default": "12"
|
||||||
"css": ":root {--rounding: $px;}",
|
},
|
||||||
"default": "12"
|
{
|
||||||
},
|
"type": "colorPicker",
|
||||||
{
|
"name": "Accent color",
|
||||||
"type": "colorPicker",
|
"description": "Choose a custom accent color to use with the theme.",
|
||||||
"name": "Accent color",
|
"css": ":root {--accent: $;}",
|
||||||
"description": "Choose a custom accent color to use with the theme.",
|
"default": "#ffffff"
|
||||||
"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",
|
"name": "JellySkin",
|
||||||
"description":"Styles title page in such a way in which logos are used instead of Names.",
|
"author": "prayagprajapati17",
|
||||||
"css":"@import url('https://prayag17.github.io/JellySkin/Logo.css');"
|
"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": "Custom",
|
"name": "Home/Index Page",
|
||||||
"author": "you",
|
"url": "https://prayag17.github.io/JellySkin/img/Home.jpg"
|
||||||
"description": "customize the look of jellyfin by your needs",
|
},
|
||||||
"defaultCss": "/*Custom*/",
|
{
|
||||||
"categories": [
|
"name": "Library Page",
|
||||||
{
|
"url": "https://prayag17.github.io/JellySkin/img/Movies.jpg"
|
||||||
"name": "Fonts",
|
},
|
||||||
"options": [
|
{
|
||||||
{
|
"name": "Title page",
|
||||||
"type": "googleFonts",
|
"url": "https://prayag17.github.io/JellySkin/img/Title%20Page-Movie.jpg"
|
||||||
"css": "/*googleFonts*/"
|
}
|
||||||
},
|
],
|
||||||
{
|
"categories": [{
|
||||||
"type": "number",
|
"name": "Default",
|
||||||
"name": "Title Font Size",
|
"options": [{
|
||||||
"description": "Change the size of the font used at titles.",
|
"type": "selector",
|
||||||
"step": "0.1",
|
"name": "Gradient",
|
||||||
"css": "h1 {font-size: $em;}",
|
"description": "Changes the Jellyfin themed Hover gradient",
|
||||||
"default": "1.8"
|
"css": "@import url('https://prayag17.github.io/JellySkin/$.css');",
|
||||||
}
|
"selections": [{
|
||||||
]
|
"name": "Default",
|
||||||
},
|
"value": ""
|
||||||
{
|
},
|
||||||
"name": "Home/Dashboard Page",
|
{
|
||||||
"options": [
|
"name": "Sea Gradient",
|
||||||
{
|
"value": "seaGradient"
|
||||||
"type": "checkBox",
|
},
|
||||||
"name": "Enlarge Tab Buttons",
|
{
|
||||||
"description": "Enlarges the tab buttons, suggested, genres, etc. By default they are really tiny, especially on mobile.",
|
"name": "Sunset Gradient",
|
||||||
"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;}"
|
"value": "sunsetGradient"
|
||||||
}
|
},
|
||||||
]
|
{
|
||||||
},
|
"name": "Night Sky Gradient",
|
||||||
{
|
"value": "nightSkyGradient"
|
||||||
"name": "Miscellaneous",
|
},
|
||||||
"options": [
|
{
|
||||||
{
|
"name": "Morning Gradient",
|
||||||
"type": "selector",
|
"value": "morningGradient"
|
||||||
"name": "Poster card hover effect",
|
}
|
||||||
"description": "Changes the hover effect on Movie/TV show/Music poster card.",
|
]
|
||||||
"css": "",
|
},
|
||||||
"selections": [
|
{
|
||||||
{
|
"type": "checkBox",
|
||||||
"name": "Scale in and out",
|
"name": "Theme Logo",
|
||||||
"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);}"
|
"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": "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",
|
"name": "Custom",
|
||||||
"description": "display actor's cards in minimal and compact way",
|
"author": "you",
|
||||||
"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%);}"
|
"description": "customize the look of jellyfin by your needs",
|
||||||
},
|
"defaultCss": "/*Custom*/",
|
||||||
{
|
"categories": [{
|
||||||
"type": "selector",
|
"name": "Fonts",
|
||||||
"name": "Episode View",
|
"options": [{
|
||||||
"description": "Theme episode list",
|
"type": "googleFonts"
|
||||||
"selections": [
|
},
|
||||||
{
|
{
|
||||||
"name": "Card",
|
"type": "number",
|
||||||
"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": "Title Font Size",
|
||||||
},
|
"description": "Change the size of the font used at titles.",
|
||||||
{
|
"step": "0.1",
|
||||||
"name": "Compact List",
|
"css": "h1 {font-size: $em;}",
|
||||||
"css": ".listItemImage.listItemImage-large.itemAction.lazy {height: 110px;}.listItem-content {height: 115px;}.secondary.listItem-overview.listItemBodyText {height: 61px;margin: 0;}"
|
"default": "1.8"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "checkBox",
|
"name": "Home/Dashboard Page",
|
||||||
"name": "Blur episode thumbnail",
|
"options": [{
|
||||||
"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).",
|
"type": "checkBox",
|
||||||
"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;}"
|
"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;}"
|
||||||
"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);}"
|
"name": "Miscellaneous",
|
||||||
},
|
"options": [{
|
||||||
{
|
"type": "selector",
|
||||||
"type": "colorPicker",
|
"name": "Poster card hover effect",
|
||||||
"mode": "hex",
|
"description": "Changes the hover effect on Movie/TV show/Music poster card.",
|
||||||
"name": "Button text color",
|
"css": "",
|
||||||
"description": "change button's text color.",
|
"selections": [{
|
||||||
"css": ".raised{color: $;}",
|
"name": "Scale in and out",
|
||||||
"default": "#ffffff"
|
"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);}"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "colorPicker",
|
"name": "Pop up and down",
|
||||||
"mode":"hex",
|
"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": "Button background color",
|
},
|
||||||
"description": "change background color of button.",
|
{
|
||||||
"css": ".raised{background-color: $;}",
|
"name": "Poster Image in and out",
|
||||||
"default": "#303030"
|
"css": "/*Dynamic Poster effect-option3*/.card:hover .cardImageContainer{filter:background-size: 120%} .cardImageContainer{background-size: 105%;transition: all .2s;}"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "colorPicker",
|
"name": "Poster Image blur",
|
||||||
"mode": "hex",
|
"css": "/*Dynamic Poster effect-option4*/.card:hover .cardImageContainer{filter: blur(2px);} .cardImageContainer{transition: all .2s;}"
|
||||||
"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": "checkBox",
|
||||||
{
|
"name": "Minimal Actor's card",
|
||||||
"type": "colorPicker",
|
"description": "display actor's cards in minimal and compact way",
|
||||||
"mode": "hex",
|
"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%);}"
|
||||||
"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;}",
|
"type": "selector",
|
||||||
"default": "#00FFFFFF"
|
"name": "Episode View",
|
||||||
},
|
"description": "Theme episode list",
|
||||||
{
|
"selections": [{
|
||||||
"type": "colorPicker",
|
"name": "Card",
|
||||||
"mode": "hex",
|
"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": "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;}",
|
"name": "Compact List",
|
||||||
"default": "#00a4dc"
|
"css": ".listItemImage.listItemImage-large.itemAction.lazy {height: 110px;}.listItem-content {height: 115px;}.secondary.listItem-overview.listItemBodyText {height: 61px;margin: 0;}"
|
||||||
},
|
}
|
||||||
{
|
]
|
||||||
"type": "colorPicker",
|
},
|
||||||
"mode": "hex",
|
{
|
||||||
"name": "Hover button color-background",
|
"type": "checkBox",
|
||||||
"description": "This modifies the background color of buttons like cast and search when your cursor is on it.",
|
"name": "Blur episode thumbnail",
|
||||||
"css": ".paper-icon-button-light:hover{background-color: $ !important;}",
|
"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).",
|
||||||
"default": "#00a4dc"
|
"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": "number",
|
"type": "checkBox",
|
||||||
"name": "Border Radius",
|
"name": "Blur Dialog Background",
|
||||||
"description": "Change the rounding",
|
"description": "Blur Menu and dialog background. Note: Works in Chrome and Edge only, functionalty can be enable, click on help button for info.",
|
||||||
"css": "*,*::before,*::after{border-radius: $ !important;}",
|
"css": ".mainDrawer {background: transparent;backdrop-filter: blur(20px);}"
|
||||||
"default": "0"
|
},
|
||||||
},
|
{
|
||||||
{
|
"type": "colorPicker",
|
||||||
"type": "blurSlider",
|
"mode": "hex",
|
||||||
"name": "Backdrop Blur",
|
"name": "Button text color",
|
||||||
"description": "adds blur to the backdrop images default is zero",
|
"description": "change button's text color.",
|
||||||
"css": ":root{--bgblur: blur($px)}.backdropImage {filter: var(--bgblur);}.backgroundContainer.withBackdrop {background-color: rgba(0,0,0,0);}",
|
"css": ".raised{color: $;}",
|
||||||
"default": "0"
|
"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": "colorPicker",
|
||||||
|
"name": "Background-color",
|
||||||
|
"description": "change background-color of the background",
|
||||||
|
"css": ".backgroundContainer.withBackdrop {background-color: rgba(0,0,0,0);}",
|
||||||
|
"default": "inherit"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "blurSlider",
|
||||||
|
"name": "Backdrop Blur",
|
||||||
|
"description": "adds blur to the backdrop images default is zero",
|
||||||
|
"css": ":root{--bgblur: blur($px)}.backdropImage {filter: var(--bgblur);}",
|
||||||
|
"default": "0"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
|
||||||
]
|
|
||||||
30
src/html/skin__request.html
Normal file
30
src/html/skin__request.html
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous"></script>
|
||||||
|
<script src="../js/json__compile.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<form>
|
||||||
|
<input type="text" id="name" name="name">
|
||||||
|
<input type="text" id="author" name="author">
|
||||||
|
<input type=" text " id="desc" name="desc">
|
||||||
|
<input type=" text " id="css" name="css">
|
||||||
|
<h2>Images</h2>
|
||||||
|
<input type=" text " id="login" name="login">
|
||||||
|
<input type=" text " id="home" name="home">
|
||||||
|
<input type=" text " id="lib" name="lib">
|
||||||
|
<input type=" text " id="title" name="title">
|
||||||
|
<h2>Categories</h2>
|
||||||
|
<input type="button" id="add" value="Add a foryour options categorie" onclick="add__option()">
|
||||||
|
<input type="button" id="no_op" value="Don't have any options/addons?" onclick="no__option()">
|
||||||
|
<div id="cat"></div>
|
||||||
|
<input type="hidden" value="1" id="total_chq">
|
||||||
|
<input type="button" onclick="createJSON()" value="save" />
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
88
src/js/json__compile.js
Normal file
88
src/js/json__compile.js
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
function add__option() {
|
||||||
|
window.new_chq_no = parseInt($('#total_chq').val()) + 1;
|
||||||
|
window.new_input = "<h3>Categorie Name</h3><input type='text' id='cat_name'><div id='op_cont'><div class='inner'><h4>option name</h4><input type='text' id='op_name'><h4>option type</h4><input type='text' id='op_type'><h4>option description</h4><input type='text' id='op_desc'><h4>option css</h4><input type='text' id='op_css'></div><input type='button' value='Add a new option'></div>";
|
||||||
|
|
||||||
|
$('#cat').append(new_input);
|
||||||
|
|
||||||
|
$('#total_chq').val(new_chq_no);
|
||||||
|
}
|
||||||
|
|
||||||
|
function create_option_json() {
|
||||||
|
var option__name = document.querySelectorAll('#op_name');
|
||||||
|
option__name.forEach(option__name => function() {
|
||||||
|
var json__options = {
|
||||||
|
"categories": [{
|
||||||
|
"name": "Default",
|
||||||
|
"options": [{
|
||||||
|
"name": name
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var categories = {}
|
||||||
|
}
|
||||||
|
|
||||||
|
function no__option() {
|
||||||
|
$('#no_op').on('click', function() {
|
||||||
|
var json__options = {
|
||||||
|
"categories": [{
|
||||||
|
"name": "Default",
|
||||||
|
"options": []
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function createJSON() {
|
||||||
|
var name = document.getElementById("name").value;
|
||||||
|
var author = document.getElementById("author").value;
|
||||||
|
var desc = document.getElementById("desc").value;
|
||||||
|
var CSS = document.getElementById("css").value;
|
||||||
|
var login = document.getElementById("login").value;
|
||||||
|
var home = document.getElementById("home").value;
|
||||||
|
var lib = document.getElementById("lib").value;
|
||||||
|
var title = document.getElementById("title").value;
|
||||||
|
var json__compiled = {
|
||||||
|
"name ": name,
|
||||||
|
"author ": author,
|
||||||
|
"description ": desc,
|
||||||
|
"defaultCss ": CSS,
|
||||||
|
"previews ": [{
|
||||||
|
"name ": "Login Page ",
|
||||||
|
"url ": login
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name ": "Home/Index Page ",
|
||||||
|
"url ": home
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name ": "Library Page ",
|
||||||
|
"url ": lib
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name ": "Title page ",
|
||||||
|
"url ": title
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
var json = JSON.stringify(json__compiled, null, 4);
|
||||||
|
|
||||||
|
json = [json];
|
||||||
|
var json__blob = new Blob(json, { type: "text/plain;charset=utf-8" });
|
||||||
|
|
||||||
|
var isIE = false || !!document.documentMode;
|
||||||
|
if (isIE) {
|
||||||
|
window.navigator.msSaveBlob(json__blob, name + ".json");
|
||||||
|
} else {
|
||||||
|
var url = window.URL || window.webkitURL;
|
||||||
|
link = url.createObjectURL(json__blob);
|
||||||
|
var a = document.createElement("a");
|
||||||
|
a.download = name + ".json";
|
||||||
|
a.href = link;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
document.body.removeChild(a);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user