mirror of
https://github.com/danieladov/jellyfin-plugin-skin-manager.git
synced 2026-01-18 16:37:31 +01:00
Daniel
GitHub
@@ -1,381 +1,278 @@
|
||||
<!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 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 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 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>
|
||||
<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();
|
||||
});
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var data;
|
||||
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()
|
||||
|
||||
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()
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function loadOptions(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 += '</div>';
|
||||
$('#options', page).html(html).trigger('create');
|
||||
|
||||
}
|
||||
|
||||
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 updateDescription( ){
|
||||
var description = document.getElementById("description");
|
||||
var selected = $('#cssOptions').val();
|
||||
|
||||
data.forEach(element => {
|
||||
if(element.defaultCss == selected){
|
||||
description.innerHTML=element.description;
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
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")=="hex"){
|
||||
color=element.value;
|
||||
}else if(element.getAttribute("data-mode")=="rgba"){
|
||||
var rgbColor = hexToRgb( element.value);
|
||||
color = rgbColor.r + "," +rgbColor.g +"," + rgbColor.b;
|
||||
}
|
||||
|
||||
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 = $('#cssOptions').val();
|
||||
data.forEach(element=>{
|
||||
if(element.defaultCss == selected){
|
||||
loadOptions(element.options);
|
||||
updateDescription();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
function loadOptions(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 += '</div>';
|
||||
$('#options', page).html(html).trigger('create');
|
||||
}
|
||||
|
||||
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;
|
||||
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 updateDescription( ){
|
||||
var description = document.getElementById("description");
|
||||
var selected = $('#cssOptions').val();
|
||||
data.forEach(element => {
|
||||
if(element.defaultCss == selected){
|
||||
description.innerHTML=element.description;
|
||||
}
|
||||
})
|
||||
}
|
||||
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")=="hex"){
|
||||
color=element.value;
|
||||
}else if(element.getAttribute("data-mode")=="rgba"){
|
||||
var rgbColor = hexToRgb( element.value);
|
||||
color = rgbColor.r + "," +rgbColor.g +"," + rgbColor.b;
|
||||
}
|
||||
|
||||
</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();
|
||||
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 = $('#cssOptions').val();
|
||||
data.forEach(element=>{
|
||||
if(element.defaultCss == selected){
|
||||
loadOptions(element.options);
|
||||
updateDescription();
|
||||
}
|
||||
})
|
||||
}
|
||||
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>
|
||||
|
||||
<style>
|
||||
.color2{
|
||||
|
||||
display: block;
|
||||
margin: 0;
|
||||
margin-bottom: 0 !important;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
padding: 0.4em 0.25em;
|
||||
|
||||
/* must the 16px or larger to prevent iOS page zoom on focus */
|
||||
font-size: 110%;
|
||||
|
||||
/* prevent padding from causing width overflow */
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
outline: none !important;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
});
|
||||
}
|
||||
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>
|
||||
.color2{
|
||||
display: block;
|
||||
margin: 0;
|
||||
margin-bottom: 0 !important;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
padding: 0.4em 0.25em;
|
||||
/* must the 16px or larger to prevent iOS page zoom on focus */
|
||||
font-size: 110%;
|
||||
/* prevent padding from causing width overflow */
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
outline: none !important;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -174,19 +174,12 @@
|
||||
"css": "h1 {font-size: $em;}",
|
||||
"default": "1.8"
|
||||
},
|
||||
{
|
||||
"type": "number",
|
||||
"name": "Modify rounding",
|
||||
"description": "Amount of rounding. Zero is none.",
|
||||
"css": ".formDialogHeader {border-top-left-radius: $px;border-top-right-radius: $px;}formDialogFooter{border-bottom-left-radius: $px;border-bottom-right-radius: $px;}.cardOverlayContainer{border-radius: $px !important;}.cardOverlayButtonIcon{border-radius:$px!important;}.osdPoster img{border-radius: $px; }.mdl-slider::-moz-range-thumb {border-radius: $px;}.mdl-slider::-ms-thumb {border-radius: $px;}.mdl-slider::-webkit-slider-thumb{border-radius: $px;}div[data-role='controlgroup'] a[data-role='button']:first-child {border-bottom-left-radius: $px;border-top-left-radius: $px;}div[data-role='controlgroup'] a[data-role='button']:last-child{border-bottom-right-radius: $px;border-top-right-radius:$px;}progress{border-radius: $px;}progress::-webkit-progress-bar{border-radius: $px;}progress::-moz-progress-bar{border-radius:$px;}progress::-webkit-progress-value {border-radius: $px;}.taskProgressOuter,.taskProgressInner{border-radius: $px !important;}::-webkit-scrollbar-thumb{border-radius:$px;}.innerCardFooter {border-radius: 0px $px !important; }.countIndicator, .playedIndicator {border-radius: 0px $px !important;}",
|
||||
"default": "0"
|
||||
},
|
||||
{
|
||||
"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;}"
|
||||
"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",
|
||||
@@ -196,14 +189,6 @@
|
||||
"css": ".mainDrawer-scrollContainer { color: $; }",
|
||||
"default":"#ffffff"
|
||||
},
|
||||
{
|
||||
"type": "number",
|
||||
"step": "0.1",
|
||||
"name": "Image Edge Rounded",
|
||||
"description": "Modifies the color of the left menu panel.",
|
||||
"css": ".cardContent-button,.itemDetailImage { border-radius: $em;}",
|
||||
"default":"0"
|
||||
},
|
||||
{
|
||||
"type": "checkBox",
|
||||
"name": "Enlarge Tab Buttons",
|
||||
@@ -233,21 +218,19 @@
|
||||
"default":"#ffffff"
|
||||
},
|
||||
{
|
||||
"type": "slider",
|
||||
"step": "0.1",
|
||||
"type": "number",
|
||||
"name": "Border Radius",
|
||||
"description": "Change the roundness of text box and more default is zero",
|
||||
"css": "@import url('https://prayag17.github.io/jellyfin-plugin-skin-manager/src/border-radius.css'); :root{--rounding: $px;}",
|
||||
"default":"0"
|
||||
},
|
||||
{
|
||||
"type": "slider",
|
||||
"step": "0.1",
|
||||
"type": "number",
|
||||
"name": "Backdrop Blur",
|
||||
"description": "adds blur to the backdrop images default is zero",
|
||||
"css": "@import url('https://prayag17.github.io/jellyfin-plugin-skin-manager/src/bgBlur.css'); :root{--bgblur: blur($px)}",
|
||||
"default": "0"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user