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

Merge pull request #6 from prayag17/cssEditor

Browse Source 
New features
This commit is contained in:
Daniel
2020-12-01 11:52:24 +01:00
committed by GitHub
parent 122a4585fa cf73e6bafc
commit 70c16248d4
3 changed files with 244 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
skins-3.0.json
View File

@@ -4,123 +4,10 @@
"author": "Jellyfin",
"description": "Default, stock, Jellyfin.",
"defaultCss": "",
"options": [
{
"type": "selector",
"name": "Change Font",
"description": "Change the font used by jellyfin",
"css": "html {font-family: $,sans-serif ; }h1,h2,h3 { font-family:$ ,sans-serif;}",
"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"
}
]
},
{
"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": "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;}"
},
{
"type": "colorPicker",
"mode": "hex",
"name": "Console Panel Color",
"description": "Modifies the color of the left menu panel.",
"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",
"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": "slider",
"step": "0.1",
"name": "test",
"description": "test Slider.",
"css": ".cardContent-button,.itemDetailImage { border-radius: $em;}",
"default":"5"
}
]
"options": []
},
{
"name": "Jellyflix",
"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);",
@@ -205,6 +92,163 @@
"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": []
"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');",
}
]
},
{
"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": "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;}"
},
{
"type": "colorPicker",
"mode": "hex",
"name": "Console Panel Color",
"description": "Modifies the color of the left menu panel.",
"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",
"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": "slider",
"step": "0.1",
"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",
"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"
}
]
}
]
]
]

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