From e690ba60822681cbb9f0f1736d01d9188ab6f8d5 Mon Sep 17 00:00:00 2001 From: gilbN Date: Sun, 15 Sep 2019 12:48:04 +0200 Subject: [PATCH] added jellyfin theme --- CSS/themes/jellyfin/aquamarine.css | 23 ++ CSS/themes/jellyfin/dark.css | 23 ++ CSS/themes/jellyfin/hotline.css | 23 ++ CSS/themes/jellyfin/jellyfin-base.css | 516 ++++++++++++++++++++++++++ CSS/themes/jellyfin/plex.css | 23 ++ CSS/themes/jellyfin/space-gray.css | 23 ++ 6 files changed, 631 insertions(+) create mode 100644 CSS/themes/jellyfin/aquamarine.css create mode 100644 CSS/themes/jellyfin/dark.css create mode 100644 CSS/themes/jellyfin/hotline.css create mode 100644 CSS/themes/jellyfin/jellyfin-base.css create mode 100644 CSS/themes/jellyfin/plex.css create mode 100644 CSS/themes/jellyfin/space-gray.css diff --git a/CSS/themes/jellyfin/aquamarine.css b/CSS/themes/jellyfin/aquamarine.css new file mode 100644 index 00000000..ecb41003 --- /dev/null +++ b/CSS/themes/jellyfin/aquamarine.css @@ -0,0 +1,23 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* JELLYFIN AQUAMARINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/jellyfin/jellyfin-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: hsla(0,0%,100%,.85); + --accent-color-hover: hsla(0,0%,100%,.95); +} \ No newline at end of file diff --git a/CSS/themes/jellyfin/dark.css b/CSS/themes/jellyfin/dark.css new file mode 100644 index 00000000..a8ed9d48 --- /dev/null +++ b/CSS/themes/jellyfin/dark.css @@ -0,0 +1,23 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* JELLYFIN DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/jellyfin/jellyfin-base.css); +:root { + --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --button-color: #cc7b19; + --button-color-hover: #e59029; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; + } \ No newline at end of file diff --git a/CSS/themes/jellyfin/hotline.css b/CSS/themes/jellyfin/hotline.css new file mode 100644 index 00000000..f07e5bb5 --- /dev/null +++ b/CSS/themes/jellyfin/hotline.css @@ -0,0 +1,23 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* JELLYFIN HOTLINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/jellyfin/jellyfin-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: hsla(0,0%,100%,.85); + --accent-color-hover: hsla(0,0%,100%,.95); +} \ No newline at end of file diff --git a/CSS/themes/jellyfin/jellyfin-base.css b/CSS/themes/jellyfin/jellyfin-base.css new file mode 100644 index 00000000..0fc85a14 --- /dev/null +++ b/CSS/themes/jellyfin/jellyfin-base.css @@ -0,0 +1,516 @@ +:root { + --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: #009688; + --button-color-hover: #12afa0; + --accent-color: hsla(0,0%,100%,.85); + --accent-color-hover: hsla(0,0%,100%,.95); + } + + .skinHeader, + html { + color: #ddd; + color: rgba(255, 255, 255, .8); + } + + .wizardStartForm, .ui-corner-all, .ui-shadow { + padding: 0 20px 20px + +} +.ui-corner-all, +.ui-shadow { + background-color: rgba(0, 0, 0, .25) !important; +} +.wizardStartForm { background: transparent !important;} + + + .emby-collapsible-button { + border-color: #383838; + border-color: rgba(255, 255, 255, .135); + } + + .skinHeader-withBackground { + background: var(--main-bg-color); + } + + .skinHeader.semiTransparent { + -webkit-backdrop-filter: none !important; + backdrop-filter: none !important; + background-color: rgba(0, 0, 0, .3); + background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0))); + background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); + background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); + background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); + } + + .pageTitleWithDefaultLogo { + background-image: url(../logowhite.png); + } + + .backgroundContainer, + .dialog, + html { + background: var(--main-bg-color) !important; + } + + .backgroundContainer.withBackdrop { + background-color: rgba(0, 0, 0, .86); + } + + .paper-icon-button-light:focus { + color: var(--button-color) !important; + background-color: rgba(255,255,255, .08) !important; + } + + .fab, + .raised { + background: var(--button-color) !important; + color: rgba(255, 255, 255, .87); + } + + .fab:focus, + .raised:focus, .fab:hover,.raised:hover { + background: var(--button-color-hover) !important; + } + + .button-submit { + background: var(--button-color) !important; + color: #fff; + } + + .button-submit:focus { + background: var(--button-color-hover); + color: #fff; + } + + .checkboxLabel { + color: inherit; + } + + .checkboxListLabel, + .inputLabel, + .inputLabelUnfocused, + .paperListLabel, + .textareaLabelUnfocused { + color: #bbb; + color: rgba(255, 255, 255, .7); + } + + .inputLabelFocused, + .selectLabelFocused, + .textareaLabelFocused { + color: var(--accent-color) !important; + } + + .checkboxOutline { + border-color: currentColor; + } + + .collapseContent, + .formDialogFooter:not(.formDialogFooter-clear), + .formDialogHeader:not(.formDialogHeader-clear), + .paperList, + .visualCardBox { + background-color: var(--main-bg-color) !important; + } + + .defaultCardBackground1 { + background-color: #d2b019; + } + + .defaultCardBackground2 { + background-color: #338abb; + } + + .defaultCardBackground3 { + background-color: #6b689d; + } + + .defaultCardBackground4 { + background-color: #dd452b; + } + + .defaultCardBackground5 { + background-color: #5ccea9; + } + + .cardText-secondary, + .fieldDescription, + .guide-programNameCaret, + .listItem .secondary, + .nowPlayingBarSecondaryText, + .programSecondaryTitle, + .secondaryText { + color: #999; + color: rgba(255, 255, 255, .5); + } + + .actionsheetDivider { + background: #444; + background: rgba(255, 255, 255, .14); + } + + .cardFooter-vibrant .cardText-secondary { + color: inherit; + opacity: .5; + } + + .actionSheetMenuItem:hover { + background-color: rgba(255, 255, 255, .08) !important; + } + + .toast { + background: #303030; + color: #fff; + color: rgba(255, 255, 255, .87); + } + + .appfooter { + background: #101010; + color: #ccc; + color: rgba(255, 255, 255, .78); + } + + @supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) { + .appfooter-blurred { + background: rgba(24, 24, 24, .7); + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); + } + } + + .itemSelectionPanel { + border: 1px solid #00a4dc; + } + + .selectionCommandsPanel { + background: #00a4dc; + color: #fff; + } + + .upNextDialog-countdownText { + color: #00a4dc; + } + + .alphaPickerButton { + color: #999; + color: rgba(255, 255, 255, .5); + background-color: transparent; + } + + .alphaPickerButton-selected { + color: #fff; + } + + .alphaPickerButton-tv:focus { + background-color: #00a4dc; + color: #fff !important; + } + + .detailTableBodyRow-shaded:nth-child(even) { + background: #1c1c1c; + background: rgba(30, 30, 30, .9); + } + + .listItem-border { + border-color: rgba(255, 255, 255, 0.25) !important; + } + + .listItem:focus { + background: #333; + } + + .progressring-spiner { + border-color: #00a4dc; + } + + .button-flat-accent, + .button-link { + color: var(--accent-color) !important; + } + + .mediaInfoText { + color: #ddd; + background: rgba(170, 170, 190, .2); + } + + .mediaInfoTimerIcon, + .starIcon { + color: #CB272A; + } + + .emby-input, + .emby-textarea { + color: inherit; + background: #292929; + border: .07em solid #292929; + -webkit-border-radius: .15em; + border-radius: .15em; + } + + .emby-input:focus, + .emby-textarea:focus { + border-color: transparent !important; + } + + .emby-select-withcolor { + color: inherit; + background: #292929; + border: .07em solid #292929; + } + + .emby-select-withcolor>option { + color: inherit; + background: #222; + } + + .emby-select-withcolor:focus { + border-color: transparent !important; + } + + .emby-select-tv-withcolor:focus { + background-color: transparent !important;; + color: #fff !important; + } + + .emby-checkbox:checked+span+span+.checkboxOutline { + border-color: transparent !important; + } + + .emby-checkbox:focus+span+.emby-checkbox-focushelper { + background-color: rgba(0,164,220, .26); + } + + .emby-checkbox:checked+span+span+.checkboxOutline, + .itemProgressBarForeground { + background-color: var(--button-color) !important; + } + + .itemProgressBarForeground-recording { + background-color: #CB272A; + } + + .countIndicator, + .fullSyncIndicator, + .playedIndicator { + background: #00a4dc; + } + + .fullSyncIndicator { + color: #fff; + } + + .mainDrawer { + background-color: rgba(0, 0, 0, 0.75) !important; +} + + .navMenuOption:hover { + background: rgba(255 ,255 ,255 ,0.08) !important; + } + .navMenuOption-selected:hover { + background: var(--button-color) !important; +} + + .navMenuOption-selected, .navMenuOption-selected:active, .navMenuOption-selected:focus { + background: none !important; + background-color: var(--button-color) !important; + color: #fff + } + + .emby-button-focusscale:focus { + background: #00a4dc; + color: #fff; + } + + .emby-tab-button { + color: #999; + color: rgba(255, 255, 255, .4); + } + + .emby-tab-button-active { + color: #fff; + } + + .emby-tab-button-active.emby-button-tv { + color: #999; + color: rgba(255, 255, 255, .4); + } + + .emby-tab-button.emby-button-tv:focus { + color: #fff; + background: 0 0; + } + + .channelPrograms, + .guide-channelHeaderCell, + .programCell { + border-color: rgba(255, 255, 255, .05); + } + + .programCell-sports { + background: #3949AB !important; + } + + .programCell-movie { + background: #5E35B1 !important; + } + + .programCell-kids { + background: #039BE5 !important; + } + + .programCell-news { + background: #43A047 !important; + } + + .programCell-active { + background: #1e1e1e !important; + } + + .guide-channelHeaderCell:focus, + .programCell:focus { + background-color: #00a4dc !important; + color: #fff !important; + } + + .guide-programTextIcon { + color: #1e1e1e; + background: #555; + } + + .guide-headerTimeslots { + color: inherit; + } + + .guide-date-tab-button { + color: #555; + color: rgba(255, 255, 255, .3); + } + + .guide-date-tab-button.emby-tab-button-active, + .guide-date-tab-button:focus { + color: #00a4dc; + } + + .guide-date-tab-button.emby-button-tv:focus { + background-color: #00a4dc; + color: #fff; + } + + .itemBackdropFader { + background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#101010)); + background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #101010); + background: -o-linear-gradient(rgba(0, 0, 0, 0), #101010); + background: linear-gradient(rgba(0, 0, 0, 0), #101010); + } + + .infoBanner { + color: #ddd; + background: rgba(255, 255, 255, 0.15) !important; + padding: 1em; + -webkit-border-radius: .25em; + border-radius: .25em; + } + + .ratingbutton-icon-withrating { + color: #c33; + } + + .downloadbutton-icon-complete, + .downloadbutton-icon-on { + color: #4285F4; + } + + .playstatebutton-icon-played { + color: #c33; + } + + .repeatButton-active { + color: #4285F4; + } + + .card:focus .card-focuscontent { + border-color: #00a4dc; + } + + .layout-desktop ::-webkit-scrollbar { + width: 10px !important; + height: 1em; + } + + ::-webkit-scrollbar-track { + -webkit-box-shadow: none !important; + box-shadow: none !important; + } + + + + ::-webkit-scrollbar-thumb:horizontal, + ::-webkit-scrollbar-thumb:vertical { + -webkit-border-radius: 2px; + border-radius: 8px!important; + background: center no-repeat hsla(0,0%,100%,.2) !important; + } + ::-webkit-scrollbar-track-piece { + background: #3b3b3b; +} + +/* + ::-webkit-scrollbar { + width: 14px !important; + } + ::-webkit-scrollbar-thumb { + min-height: 50px !important; + border: 3px solid transparent !important; + border-radius: 8px!important; + background-color: hsla(0,0%,100%,.2) !important; + background-clip: padding-box !important; + } + ::-webkit-scrollbar-track { + background-color: transparent !important; + } + ::-webkit-scrollbar-thumb:hover { + min-height: 50px !important; + border: 3px solid transparent !important; + border-radius: 8px !important; + background-color: hsla(0,0%,100%,.5) !important; + background-clip: padding-box !important; + } */ + + .timeslotHeaders-desktop::-webkit-scrollbar { + height: .7em; + } + + + /*Emby css */ + + /* Toggle Button */ + + .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { + background: var(--button-color) !important; + left: 1.466em; + box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 0.56em 0 rgba(0, 0, 0, 0.12); +} +.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track { + background: var(--button-color) !important; + opacity: .5 !important; +} +.mdl-switch__input:checked:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper { + box-shadow: 0 0 0 1.39em rgba(255, 255, 255, 0.08) !important; + background-color: rgba(255, 255, 255, 0.08) !important; +} + +/*Settings */ + +.listItem:hover { + background: rgb(255, 255, 255, .08) !important; +} + +/* user icon */ +.listItemIcon:not(.listItemIcon-transparent) { + background-color: var(--button-color) !important; + color: #fff; + padding: .5em; + border-radius: 100em; + margin: 0 .2em 0 .4em; +} diff --git a/CSS/themes/jellyfin/plex.css b/CSS/themes/jellyfin/plex.css new file mode 100644 index 00000000..51f8b54b --- /dev/null +++ b/CSS/themes/jellyfin/plex.css @@ -0,0 +1,23 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* JELLYFIN PLEX THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/jellyfin/jellyfin-base.css); +:root { + --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; + --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; + --button-color: #cc7b19; + --button-color-hover: #e59029; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; + } \ No newline at end of file diff --git a/CSS/themes/jellyfin/space-gray.css b/CSS/themes/jellyfin/space-gray.css new file mode 100644 index 00000000..79770d05 --- /dev/null +++ b/CSS/themes/jellyfin/space-gray.css @@ -0,0 +1,23 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* JELLYFIN SPACE GRAY THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/jellyfin/jellyfin-base.css); +:root { + --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --accent-color: #607D8B; + --accent-color-hover: #81a6b7; +} \ No newline at end of file