From 60f353acd65254ab47b1cf9dcb46846855ddcd37 Mon Sep 17 00:00:00 2001 From: Prayag <55829513+prayag17@users.noreply.github.com> Date: Mon, 30 Nov 2020 15:23:34 +0530 Subject: [PATCH 1/5] Create a new option name custom to customize jellyfin look --- skins-3.0.json | 249 ++++++++++++++++++++++++++----------------------- 1 file changed, 134 insertions(+), 115 deletions(-) diff --git a/skins-3.0.json b/skins-3.0.json index 982d49d..4aa27c6 100644 --- a/skins-3.0.json +++ b/skins-3.0.json @@ -4,120 +4,7 @@ "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", @@ -206,5 +93,137 @@ "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": [] + }, + { + "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", + "css": "@import url('pathtocsslink'); :root{--rounding: $px;}", + "default":"1" + }, + { + "type": "slider", + "step": "0.1", + "name": "Backdrop Blur", + "description": "adds blur to the backdrop images", + "css": "@import url(''); :root{--bgblur: $px}", + "default": "1" + } + ] } -] \ No newline at end of file +] +] From d858ca509ded83ab75db3a2dfac66e4b4c59591e Mon Sep 17 00:00:00 2001 From: Prayag <55829513+prayag17@users.noreply.github.com> Date: Mon, 30 Nov 2020 15:24:53 +0530 Subject: [PATCH 2/5] Create border-radius.css --- src/border-radius.css | 75 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 src/border-radius.css diff --git a/src/border-radius.css b/src/border-radius.css new file mode 100644 index 0000000..c9f8134 --- /dev/null +++ b/src/border-radius.css @@ -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); +} From 0ea8e6fec54a1af865014b1aa7c3bac234091e5f Mon Sep 17 00:00:00 2001 From: Prayag <55829513+prayag17@users.noreply.github.com> Date: Mon, 30 Nov 2020 15:32:36 +0530 Subject: [PATCH 3/5] Create bgBlur.css --- src/bgBlur.css | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/bgBlur.css diff --git a/src/bgBlur.css b/src/bgBlur.css new file mode 100644 index 0000000..f75bd1d --- /dev/null +++ b/src/bgBlur.css @@ -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); +} From b2cc79d9dfc5e3ca69778c8aae8a526f0bfdae7f Mon Sep 17 00:00:00 2001 From: Prayag <55829513+prayag17@users.noreply.github.com> Date: Mon, 30 Nov 2020 15:33:52 +0530 Subject: [PATCH 4/5] added links to slider css --- skins-3.0.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/skins-3.0.json b/skins-3.0.json index 4aa27c6..9c33f43 100644 --- a/skins-3.0.json +++ b/skins-3.0.json @@ -211,17 +211,17 @@ "type": "slider", "step": "0.1", "name": "Border Radius", - "description": "Change the roundness of text box and more", - "css": "@import url('pathtocsslink'); :root{--rounding: $px;}", - "default":"1" + "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", - "css": "@import url(''); :root{--bgblur: $px}", - "default": "1" + "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" } ] } From cf73e6bafc68c762e63e1590a8cfa3ed0605af51 Mon Sep 17 00:00:00 2001 From: Prayag <55829513+prayag17@users.noreply.github.com> Date: Mon, 30 Nov 2020 15:35:11 +0530 Subject: [PATCH 5/5] Update my skins --- skins-3.0.json | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/skins-3.0.json b/skins-3.0.json index 9c33f43..d836199 100644 --- a/skins-3.0.json +++ b/skins-3.0.json @@ -7,7 +7,7 @@ "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);", @@ -92,7 +92,32 @@ "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",