BreizhHardware/jellyfin-plugin-skin-manager
1
0
Fork 0
mirror of https://github.com/danieladov/jellyfin-plugin-skin-manager.git synced 2026-01-18 16:37:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12 from danieladov/cssEditor

Browse Source 
Add Css editor
This commit is contained in:
Daniel
2020-12-11 17:53:25 +01:00
committed by GitHub
parent 6b8e6738b4 df8f15ad1c
commit 9ef4b40110
8 changed files with 732 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

470
Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
View File

@@ -1,190 +1,312 @@
<!DOCTYPE html>
<html>
<head>
<title>Skin Manager</title>
</head>
<body>
<div data-role="page" class="page type-interior pluginConfigurationPage tbsConfigurationPage"
data-require="emby-input,emby-button">
<div data-role="content">
<div class="content-primary">
<form class="tbsConfigurationPage">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">Skin Manager</h2>
<a is="emby-linkbutton" class="raised button-alt headerHelpButton emby-button" target="_blank"
href="https://github.com/danieladov/jellyfin-plugin-skin-manager">Help</a>
</div>
<div class="verticalSection">
<p>
Select the skin you want to install and press Set Skin
</p>
<br />
</div>
<div class="selectContainer">
<label for="css">css</label>
<select is="emby-select" id="cssOptions" onchange="updateVersions()">
</select>
<label for="Version">Version</label>
<select is="emby-select" id="skinVersions" onchange="updateDescription()">
</select>
<p id="description"></p>
<br />
<button is="emby-button" type="button" class="raised block" id="refresh-library"
onclick=setSkin()>
<span>Set Skin</span>
</button>
</form>
<div data-role="page" class="page type-interior pluginConfigurationPage tbsConfigurationPage" data-require="emby-input,emby-button">
<div data-role="content">
<div class="content-primary">
<form class="tbsConfigurationPage">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">Skin Manager</h2>
<a is="emby-linkbutton" class="raised button-alt headerHelpButton emby-button" target="_blank" href="https://github.com/danieladov/jellyfin-plugin-skin-manager">Help</a>
</div>
<div class="verticalSection">
<p>
Select the skin you want to install and click Set Skin
</p>
<br>
</div>
<div class="allOptions">
<div class="selectContainer">
<label for="css">Skin</label>
<select is="emby-select" id="cssOptions" onchange="updateSelectors()"></select>
<br>
<div class="fieldDescription" id="description"></div>
</div>
</div>
<script type="text/javascript">
function loadSkins(){
$.getJSON('https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/skins-2.0.json', function(data) {
var cssOptions = document.getElementById("cssOptions");
var skinVersions = document.getElementById("skinVersions");
var versionDescription = document.getElementById("versionDescription");
data.forEach(element => {
var opt = document.createElement("option");
opt.appendChild(document.createTextNode(element.name));
opt.value=element.name;
cssOptions.appendChild(opt);
element.versions.forEach(version =>{
})
});
updateVersions()
});
}
loadSkins();
function updateVersions(){
var selected = $('#cssOptions').val();
var skinVersions = document.getElementById("skinVersions");
//clear selector
for (i = skinVersions.options.length-1; i >= 0; i--) {
skinVersions.options[i] = null;
}
$.getJSON('https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/skins-2.0.json', function(data) {
var skinVersions = document.getElementById("skinVersions");
data.forEach(element => {
if(selected == element.name){
element.versions.forEach(version =>{
var opt = document.createElement("option");
opt.appendChild(document.createTextNode(version.name));
opt.value=version.css;
skinVersions.appendChild(opt);
description.innerHTML=version.description;
})
}
});
updateDescription()
});
}
function updateDescription( ){
var description = document.getElementById("description");
var selected = $('#skinVersions').val();
$.getJSON('https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/skins-2.0.json', function(data) {
data.forEach(element => {
element.versions.forEach(version => {
if(version.css == selected){
description.innerHTML=version.description;
}
});
})
})
}
function setSkin() {
ApiClient.getServerConfiguration().then(function (config) {
ApiClient.updateServerConfiguration(config).then(function() {
ApiClient.getNamedConfiguration('branding').then(function(brandingConfig) {
brandingConfig.CustomCss = $('#skinVersions').val();
ApiClient.updateNamedConfiguration('branding', brandingConfig).then(function () {
Dashboard.processServerConfigurationUpdateResult();
window.location.reload(true);
});
});
});
});
<div class="checkboxList checkboxList-verticalwrap" id ="options"></div>
<br>
</div>
<button is="emby-button" type="button" class="raised block" id="refresh-library" onclick=setSkin()>
<span>Set Skin</span>
</button>
</form>
</div>
</div>
<script type="text/javascript">
var data;
Dashboard.showLoadingMsg();
$.getJSON('https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/cssEditor/skins-3.0.json', function(json) {
data=json;
loadSkins();
Dashboard.hideLoadingMsg();
});
function loadSkins(){
var cssOptions = document.getElementById("cssOptions");
var skinVersions = document.getElementById("skinVersions");
var versionDescription = document.getElementById("versionDescription");
data.forEach(element => {
var opt = document.createElement("option");
opt.appendChild(document.createTextNode(element.name));
opt.value=element.defaultCss;
cssOptions.appendChild(opt);
});
updateSelectors()
}
</script>
function loadOptions(skin){
var options = skin.options;
var page = $.mobile.activePage;
var html = "";
html += '<div data-role="controlgroup">';
options.forEach(element=>{
if(element.type == "checkBox"){
html += getCheckBox(element);
}else if(element.type == "colorPicker"){
html += getColorPicker(element);
}else if(element.type == "number"){
html += getNumber(element);
}else if(element.type == "selector"){
html += getSelector(element);
}else if(element.type == "slider"){
html += getSlider(element);
}
});
html += loadPreviews(skin);
html += '</div>';
$('#options', page).html(html).trigger('create');
}
<script type="text/javascript">
var plugin = {
guid: 'e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3'
};
function loadPreviews(skin){
if(skin.previews == undefined){
return "";
}
var html = "";
html += '<h2 class="sectionTitle" >Previews</h2>';
skin.previews.forEach(element => {
html += getImage(element.url);
html += getImgnames(element.name);
});
return html;
}
$('#configPage').on('pageshow', function () {
Dashboard.showLoadingMsg();
loadSavedConfig();
ApiClient.getPluginConfiguration(plugin.guid).then(function (config) {
$('#cssOptions').val(config.selectedCss).change();
Dashboard.hideLoadingMsg();
function getCheckBox ( option) {
var html = "";
var id = "chkFolder" ;
var name = option.name;
var css = option.css;
var description = option.description;
//html += '<label><input is="emby-checkbox" class="chkLibrary" type="checkbox" data-mini="true" id="' + id + '" name="' + id + '" data-value="' + value + '" '+' /><span>' + name + '</span></label>';
html += '<div class="checkboxContainer checkboxContainer-withDescription"><label><input class = "checkbox" type="checkbox" is="emby-checkbox" id="' + id + '"name="' + id + '" data-css="' + css + '" '+' /><span>'+ name +'</span></label><div class="fieldDescription checkboxFieldDescription">'+description+'</div></div>'
return html;
}
function getColorPicker ( option) {
var html = "";
var id = "favcolor" ;
var name = option.name;
var defaultValue = option.default;
var css = option.css;
var description = option.description;
var mode = option.mode;
html += '<div class="inputContainer"><input style="height: 1em; padding: 0px; border: none;" type=color class = "color" value="' + defaultValue + '"data-css = "'+ css+ '" data-mode="'+mode+'" id="' + id + '" name="' + id + '" label="'+name +'" /><div class="fieldDescription">'+description+'</div></div>';
return html;
}
function getNumber(option){
var html = "";
var id = "number" ;
var name = option.name;
var css = option.css;
var step = option.step==undefined?1:option.step;
var defaultValue = option.default;
var description = option.description;
//html += '<label for=number><input is="emby-input" type=number value=' + defaultValue + ' class = "number" data-css = "'+ css+ '" + data-mini="true" id="' + id + '" name="' + id + '" data-name="' + name + '" ' + ' /><span>' + name + '</span></label><br>';
html += '<div class="inputContainer"><input is="emby-input" type="number" class = "number" value=' + defaultValue + ' step=' + step + ' data-css = "'+ css+ '" id="' + id + '" name="' + id + '" min="0" max="300" label="'+name +'" /><div class="fieldDescription">'+description+'</div></div>'
return html;
}
function getSelector(option){
var html = "";
var id = "selector" ;
var name = option.name;
var css = option.css;
var defaultValue = option.default;
var description = option.description;
//html += '<label for=number><input is="emby-input" type=number value=' + defaultValue + ' class = "number" data-css = "'+ css+ '" + data-mini="true" id="' + id + '" name="' + id + '" data-name="' + name + '" ' + ' /><span>' + name + '</span></label><br>';
html += '<div class="selectContainer"><select is="emby-select" data-css= "'+css + '"class="selector" label="'+name+'">' + getOptions(option)+'</select></div>'
return html;
}
function getOptions(option){
var html = "";
var selections = option.selections
var css = option.css;
selections.forEach(element=>{
var name = element.name;
html+= '<option data-css= "'+css + '"value='+name+'>'+ name +'</option>'
})
return html;
}
function getSlider(option){
var html = "";
var id = "slider" ;
var name = option.name;
var css = option.css;
var step = option.step==undefined?1:option.step;
var defaultValue = option.default;
var description = option.description;
html += '<div class="inputContainer"><input is="emby-slider" type="range" class = "slider" value=' + defaultValue + ' step=' + step + ' data-css = "'+ css+ '" id="' + id + '" name="' + id + '" min="0" max="300" label="'+name +'" /><div class="fieldDescription">'+description+'</div></div>'
return html
}
function getImage(url){
var html = "";
html += '<fieldset class="verticalSection verticalSection-extrabottompadding"><img src="'+url+'">';
return html;
}
function getImgnames(name){
var html = "";
html += '<legend>'+name+'</legend></fieldset>';
return html;
}
function createCss(){
var savedHtml = "";
//process checkbox
var css = $('#cssOptions').val();
savedHtml += document.getElementById("cssOptions").innerHTML;
var checkboxes = document.getElementsByClassName("checkbox");
for (let element of checkboxes) {
savedHtml += element.innerHTML;
}
var selectedOptions = $('.checkbox:checked').map(function () {
return this.getAttribute('data-css');
}).get();
selectedOptions.forEach(element => {
css += element +"\n";
});
//proccess selector
var selectors = document.getElementsByClassName("selector");
for (let element of selectors) {
css += element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
savedHtml += element.outerHTML;
}
//process colorPicker
selectedOptions.forEach(element=>{
css += element + "\n";
})
var colorPickers = document.getElementsByClassName("color");
for (let element of colorPickers) {
savedHtml += element.outerHTML
if(element.getAttribute("data-mode")=="rgba"){
var rgbColor = hexToRgb( element.value);
color = rgbColor.r + "," +rgbColor.g +"," + rgbColor.b;
} else{
color=element.value;
}
css+= element.getAttribute("data-css").replaceAll("$",color)+ "\n";
}
//procces number selector
var numberSelectors = document.getElementsByClassName("number");
for (let element of numberSelectors) {
savedHtml += element.outerHTML;
css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
}
//procces slider
var sliders = document.getElementsByClassName("slider");
for (let element of sliders) {
css+= element.getAttribute("data-css").replaceAll("$",element.value) + "\n";
}
return css;
}
function updateSelectors(){
var selected = document.getElementById("cssOptions");
var description = document.getElementById("description");
data.forEach(element=>{
if(element.name == selected.selectedOptions[0].innerText){
loadOptions(element);
description.innerHTML=element.description;
}
})
}
function setSkin() {
ApiClient.getServerConfiguration().then(function (config) {
ApiClient.updateServerConfiguration(config).then(function() {
ApiClient.getNamedConfiguration('branding').then(function(brandingConfig) {
brandingConfig.CustomCss = createCss();
ApiClient.updateNamedConfiguration('branding', brandingConfig).then(function () {
Dashboard.processServerConfigurationUpdateResult();
window.location.reload(true);
});
});
});
$('#configForm').on('submit', function () {
Dashboard.showLoadingMsg();
ApiClient.getPluginConfiguration(plugin.guid).then(function (config) {
config.selectedCss = $('#cssOptions').val();
ApiClient.updatePluginConfiguration(plugin.guid, config).then(function (result) {
Dashboard.processPluginConfigurationUpdateResult(result);
});
});
return false;
});
</script>
});
}
function hexToRgb(hex) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
</script>
<script type="text/javascript">
var plugin = {
guid: 'e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3'
};
$('#configPage').on('pageshow', function () {
Dashboard.showLoadingMsg();
loadSavedConfig();
ApiClient.getPluginConfiguration(plugin.guid).then(function (config) {
$('#cssOptions').val(config.selectedCss).change();
Dashboard.hideLoadingMsg();
});
});
$('#configForm').on('submit', function () {
Dashboard.showLoadingMsg();
ApiClient.getPluginConfiguration(plugin.guid).then(function (config) {
config.selectedCss = $('#cssOptions').val();
ApiClient.updatePluginConfiguration(plugin.guid, config).then(function (result) {
Dashboard.processPluginConfigurationUpdateResult(result);
});
});
return false;
});
</script>
<style>
img{
width: 100%;
}
fieldset.verticalSection.verticalSection-extrabottompadding {
border: 1px solid #333333;
border-radius: 10px;
}
legend {
font-size: 135%;
}
</style>
</div>
</body>
</html>

BIN
Kaleidochromic/Login.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
Monochromic/Lib.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

BIN
Monochromic/login.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

28
README.md
View File

@@ -1,4 +1,4 @@
<h1 align="center">Jellyfin Theme Songs Plugin</h1>
<h1 align="center">Jellyfin Skin Manager Plugin</h1>
<h3 align="center">Part of the <a href="https://jellyfin.media">Jellyfin Project</a></h3>
<p align="center">
@@ -46,3 +46,29 @@ Because the config includes Content-Security-Policy which reduces risk of XSS, y
For example to use Kaleidochromic you need to do [this](https://github.com/CTalvio/Kaleidochromic/blob/main/README.md#using-with-reverse-proxy)
## JSON
## Skin Properties
- name //The name of the skin
- author //The author of the skin
- defaultCss //The base css of the skin
- options //An array of options that will modified the skin
- ## Options Properties
- type //the type of the input (checkBox, number, select, colorPicker)
- name // the name of the option
- description // the description of the option
- css //The css code that will modified the skin $ symbols in this code will be replaced by the value selected by the user (in number, select and color picer)
Some option have custom properties:
- ## number properties
- default //Default value
- step //step of the input
- ## selector properties
- selections //Array of options
- ## selections properties
- name // name of the option
- value // value of the option

326
skins-3.0.json Normal file
View File

@@ -0,0 +1,326 @@
[
{
"name": "Default",
"author": "Jellyfin",
"description": "Default, stock, Jellyfin.",
"defaultCss": "",
"options": [],
"previews":[
{
"name": "Login Page",
"url": ""
},
{
"name": "Home/Index Page",
"url": ""
},
{
"name": "Library Page",
"url": ""
},
{
"name": "Title page",
"url": ""
}
]
},
{
"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);",
"options": [],
"previews":[
{
"name": "Login Page",
"url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/LoginMan.png?raw=true"
},
{
"name": "Home/Index Page",
"url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/Home.png?raw=true"
},
{
"name": "Library Page",
"url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/LibPage.png?raw=true"
},
{
"name": "Title page",
"url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/TV-TitlePage.png?raw=true"
}
]
},
{
"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');",
"options": [
{
"type": "checkBox",
"name": "Improve performance",
"description": "The theme uses mask-image to fade out items below the top bar as you scroll. This works well on most reasonable hardware but struggles on some phones and especially smart TVs. This switches to a method without using mask-image, but foregoes the fade-out effect. I may switch to this method being the default.",
"css": "@import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
},
{
"type": "checkBox",
"name": "No rounded corners",
"description": "In fact, squares off every rounded corner JF ever had.",
"css": "@import url('https://ctalvio.github.io/Monochromic/sharp_style.css'); "
},
{
"type": "checkBox",
"name": "Restore bottom bar style episode progress",
"description": "Don't like my transparent view progress overlay? Use this to go back to the old style.",
"css": "@import url('https://ctalvio.github.io/Monochromic/bottom-progress_style.css');"
},
{
"type": "number",
"name": "Modify rounding",
"description": "Amount of rounding. Zero is none.",
"css": ":root {--rounding: $px;}",
"default": "5"
},
{
"type": "colorPicker",
"name": "Accent color",
"description": "Choose a custom accent color to use with the theme.",
"css": "@import url('https://ctalvio.github.io/Monochromic/customcolor_style.css');:root {--accent: $;}",
"default": ""
}
],
"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",
"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');",
"options": [
{
"type": "checkBox",
"name": "Improve performance",
"description": "The theme uses mask-image to fade out items below the top bar as you scroll. This works well on most reasonable hardware but struggles on some phones and especially smart TVs. This switches to a method without using mask-image, but foregoes the fade-out effect.",
"css": "@import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
},
{
"type": "checkBox",
"name": "Restore bottom bar style episode progress",
"description": "Don't like my transparent view progress overlay? Use this to go back to the old style.",
"css": "@import url('https://ctalvio.github.io/Monochromic/bottom-progress_style.css');"
},
{
"type": "number",
"name": "Modify rounding",
"description": "Amount of rounding. Zero is none.",
"css": ":root {--rounding: $px;}",
"default": "12"
},
{
"type": "colorPicker",
"name": "Accent color",
"description": "Choose a custom accent color to use with the theme.",
"css": ":root {--accent: $;}",
"default": "#6279cd"
}
],
"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"
}
]
},
{
"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": [
{
"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"
},
{
"name": "Home/Index Page",
"url": "https://github.com/prayag17/JellySkin/raw/master/Version%204/Home.png?raw=true"
},
{
"name": "Library Page",
"url": "https://github.com/prayag17/JellySkin/raw/master/Version%204/lib%202.png?raw=true"
},
{
"name": "Title page",
"url": "https://github.com/prayag17/JellySkin/raw/master/Version%204/title%201.png?raw=true"
}
]
},
{
"name": "Custom",
"author": "you",
"description": "customize the look of jellyfin by your needs",
"defaultCss": "",
"options": [
{
"type": "selector",
"name": "Change Font",
"description": "Change the default fonts",
"css": "html {font-family: $,sans-serif ; } body,h1,h2,h3 { font-family:$ ,sans-serif;} @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,800;1,900&display=swap');",
"selections": [
{
"name": "Noto Sans"
},
{
"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",
"name": "Title Font Size",
"description": "Change the size of the font used at titles.",
"step": "0.1",
"css": "h1 {font-size: $em;}",
"default": "1.8"
},
{
"type": "colorPicker",
"mode":"rgba",
"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;}"
},
{
"type": "checkBox",
"name": "Stylized Episode Previews",
"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.",
"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;}"
},
{
"type": "colorPicker",
"mode": "hex",
"name": "Custom Background Color",
"description": "Change background color.",
"css": ".backgroundContainer, .dialog, html { background-color: $;}",
"default": "#000000"
},
{
"type": "colorPicker",
"mode": "hex",
"name": "Right Header Color",
"description": "This modifies the colors of the cast, search and user buttons in the top right.",
"css": ".headerRight { color: $; }",
"default":"#ffffff"
},
{
"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);}",
"css": "",
"default":"0"
},
{
"type": "number",
"name": "Backdrop Blur",
"description": "adds blur to the backdrop images default is zero",
"css": ":root{--bgblur: blur($px)}.backdropImage {filter: var(--bgblur);}.backgroundContainer.withBackdrop {background-color: rgba(0,0,0,0);}",
"default": "0"
}
]
}
]

8
src/bgBlur.css Normal file
View File

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

75
src/border-radius.css Normal file
View File

@@ -0,0 +1,75 @@
/*Setting border Radius*/
:root {--rounding: 0px;}
/*Rounded corners on pretty much everything-Source Monochromic*/
.formDialogHeader {
border-top-left-radius: var(--rounding);
border-top-right-radius: var(--rounding);
}
.formDialogFooter {
border-bottom-left-radius: var(--rounding);
border-bottom-right-radius: var(--rounding);
}
.cardOverlayContainer {
border-radius: var(--rounding) !important;
}
.toast,
.paperList,
.cardContent,
.sessionNowPlayingInnerContent,
.listItem:hover,
.cardImage,
.fab,
.multiSelectCheckboxOutline,
.itemSelectionPanel,
.cardContent-button,
.cardContent-shadow,
.itemDetailImage,
.cardOverlayButton-hover,
.cardImageContainer,
.cardPadder,
.listItemImage,
.listItemImageButton,
.listItemButton,
.headerButton,
.paper-icon-button-light,
.innerCardFooter,
.blurhash-canvas,
.actionSheetMenuItem:hover,
.dialog,
.listItemIcon,
.listItem-border,
.button-flat,
.visualCardBox,
.checkboxOutline,
.emby-select-withcolor,
.chapterThumbTextContainer,
.chapterThumbContainer,
.chapterThumb,
.emby-input,
.emby-textarea,
.emby-select-withcolor,
.cardOverlayButtonIcon,
.subtitleappearance-preview.flex.align-items-center.justify-content-center {
border-radius: var(--rounding) !important;
}
.osdPoster img {
border-radius: var(--rounding); border: none;
}
.mdl-slider::-moz-range-thumb {
border-radius: var(--rounding);
}
.mdl-slider::-ms-thumb {
border-radius: var(--rounding);
}
.mdl-slider::-webkit-slider-thumb {
border-radius: var(--rounding);
}
div[data-role="controlgroup"] a[data-role="button"]:first-child {
border-bottom-left-radius: var(--rounding);
border-top-left-radius: var(--rounding);
}
div[data-role="controlgroup"] a[data-role="button"]:last-child {
border-bottom-right-radius: var(--rounding);
border-top-right-radius: var(--rounding);
}