From 0b5eb0df6f4fe46b548e3f76c32312b0a8c7d896 Mon Sep 17 00:00:00 2001 From: Marius <24592972+gilbN@users.noreply.github.com> Date: Mon, 19 Jul 2021 19:39:44 +0200 Subject: [PATCH] emby dracula theme --- CSS/themes/emby/aquamarine.css | 27 ++--- CSS/themes/emby/dark.css | 28 ++--- CSS/themes/emby/dracula.css | 63 ++++++++++ CSS/themes/emby/emby-base.css | 188 ++++++++++++++++++++---------- CSS/themes/emby/hotline.css | 27 ++--- CSS/themes/emby/organizr-dark.css | 44 +++---- CSS/themes/emby/plex.css | 27 ++--- CSS/themes/emby/space-gray.css | 27 ++--- CSS/variables/hotline.css | 2 +- 9 files changed, 281 insertions(+), 152 deletions(-) create mode 100644 CSS/themes/emby/dracula.css diff --git a/CSS/themes/emby/aquamarine.css b/CSS/themes/emby/aquamarine.css index aef4e58e..45c489ab 100644 --- a/CSS/themes/emby/aquamarine.css +++ b/CSS/themes/emby/aquamarine.css @@ -13,21 +13,22 @@ /* EMBY AQUAMARINE THEME */ @import url("https://theme-park.dev/CSS/themes/emby/emby-base.css"); +@import url("https://dev.theme-park.dev/CSS/variables/aquamarine.css"); :root { - --theme-primary-color: #009688; - --theme-text-color: #eee; - --theme-text-color-opaque: #fff; - --theme-accent-text-color: #009688; - --theme-primary-color-lightened: rgba(0, 150, 135, 0.2); - --theme-icon-focus-background: rgba(0, 150, 135, 0.2); + --theme-primary-color: var(--accent-color); + --theme-text-color: var(--text); + --theme-text-color-opaque: var(--text-hover); + --theme-accent-text-color: var(--accent-color); + --theme-primary-color-lightened: var(--accent-color-hover); + --theme-icon-focus-background: rgba(var(--accent-color), 0.2); - --theme-background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; + --button-background: var(--button-color); --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;; + --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); --header-background: var(--theme-background); @@ -39,24 +40,24 @@ @media (pointer: fine) { :not(.layout-tv):root { - --theme-background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; --docked-drawer-background: rgba(0, 0, 0, 0.25); --button-background: #1f1f1f; --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;; + --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); } } .layout-tv:root { - --theme-background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; --docked-drawer-background: rgba(0, 0, 0, 0.25); --button-background: #1f1f1f; --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;; + --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); } \ No newline at end of file diff --git a/CSS/themes/emby/dark.css b/CSS/themes/emby/dark.css index e072b1e7..47e05ceb 100644 --- a/CSS/themes/emby/dark.css +++ b/CSS/themes/emby/dark.css @@ -13,22 +13,22 @@ /* EMBY DARK THEME */ @import url("https://theme-park.dev/CSS/themes/emby/emby-base.css"); - +@import url("https://dev.theme-park.dev/CSS/variables/dark.css"); :root { - --theme-primary-color: #646464; - --theme-text-color: #eee; - --theme-text-color-opaque: #fff; - --theme-accent-text-color: #646464; - --theme-primary-color-lightened: rgba(100, 100, 100, 0.8); - --theme-icon-focus-background: rgba(100, 100, 100, 0.2); + --theme-primary-color: var(--accent-color); + --theme-text-color: var(--text); + --theme-text-color-opaque: var(--text-hover); + --theme-accent-text-color: var(--accent-color); + --theme-primary-color-lightened: var(--accent-color-hover); + --theme-icon-focus-background: rgba(var(--accent-color), 0.2); - --theme-background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; + --button-background: var(--button-color); --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;; + --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); --header-background: var(--theme-background); @@ -40,24 +40,24 @@ @media (pointer: fine) { :not(.layout-tv):root { - --theme-background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; --docked-drawer-background: rgba(0, 0, 0, 0.25); --button-background: #1f1f1f; --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;; + --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); } } .layout-tv:root { - --theme-background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; --docked-drawer-background: rgba(0, 0, 0, 0.25); --button-background: #1f1f1f; --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;; + --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); } \ No newline at end of file diff --git a/CSS/themes/emby/dracula.css b/CSS/themes/emby/dracula.css new file mode 100644 index 00000000..c47edc43 --- /dev/null +++ b/CSS/themes/emby/dracula.css @@ -0,0 +1,63 @@ + +/* 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 */ + +/* EMBY DRACULA THEME */ +@import url("https://dev.theme-park.dev/CSS/themes/emby/emby-base.css"); +@import url("https://dev.theme-park.dev/CSS/variables/dracula.css"); +:root { + --theme-primary-color: var(--accent-color); + --theme-text-color: var(--text); + --theme-text-color-opaque: var(--text-hover); + --theme-accent-text-color: var(--accent-color); + --theme-primary-color-lightened: var(--accent-color-hover); + --theme-icon-focus-background: rgba(var(--accent-color), 0.2); + + --theme-background: var(--main-bg-color); + --header-blur-background: rgba(20,20,20,0.66); + --drawer-background: #2C2C2E; + --docked-drawer-background: rgba(0, 0, 0, 0.25); + --button-background: var(--button-color); + --card-background: rgba(0, 0, 0, 0.15); + --footer-background: var(--modal-footer-color); + --footer-blur-background: rgba(29,29,31,0.66); + + --header-background: var(--theme-background); + --theme-body-secondary-text-color: rgba(255, 255, 255, .6); + --line-background: rgba(255, 255, 255, .08); + --line-size: .08em; + --scrollbar-thumb-background: rgba(255,255,255,.3); +} + +@media (pointer: fine) { + :not(.layout-tv):root { + --theme-background: var(--main-bg-color); + --header-blur-background: rgba(20,20,20,0.66); + --drawer-background: #2C2C2E; + --docked-drawer-background: rgba(0, 0, 0, 0.25); + --button-background: #1f1f1f; + --card-background: rgba(0, 0, 0, 0.15); + --footer-background: var(--modal-footer-color); + --footer-blur-background: rgba(29,29,31,0.66); + } +} + +.layout-tv:root { + --theme-background: var(--main-bg-color); + --header-blur-background: rgba(20,20,20,0.66); + --drawer-background: #2C2C2E; + --docked-drawer-background: rgba(0, 0, 0, 0.25); + --button-background: #1f1f1f; + --card-background: rgba(0, 0, 0, 0.15); + --footer-background: var(--modal-footer-color); + --footer-blur-background: rgba(29,29,31,0.66); +} \ No newline at end of file diff --git a/CSS/themes/emby/emby-base.css b/CSS/themes/emby/emby-base.css index 67fbc12f..aa71c0ec 100644 --- a/CSS/themes/emby/emby-base.css +++ b/CSS/themes/emby/emby-base.css @@ -1,3 +1,23 @@ + +/*TP CUSTOM */ +h1,h2, h3, h4, h5, h6, +.inputLabel { + color: var(--text-hover); +} + +a:not(.emby-button), +.cardText.cardTextCentered.cardText-first > button { + color: var(--link-color) !important; +} + +a:hover:not(.emby-button), +.cardText.cardTextCentered.cardText-first > button:hover + { + color: var(--link-color-hover) !important; +} + +/*TP END*/ + html { color: var(--theme-text-color); scrollbar-color: var(--scrollbar-thumb-background) transparent @@ -22,7 +42,7 @@ html { -o-background-size: auto, cover; } -.appfooter,.formDialogFooter:not(.formDialogFooter-clear),.formDialogHeader:not(.formDialogHeader-clear) { +.appfooter,.formDialogFooter:not(.formDialogFooter-clear) { background: var(--footer-background); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; @@ -32,6 +52,27 @@ html { -moz-background-size: auto, cover; -o-background-size: auto, cover; } +.formDialogHeader:not(.formDialogHeader-clear) { + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.dialog { + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { .skinHeader-withBackground { @@ -65,7 +106,7 @@ html { background-image: url(https://theme-park.dev/Resources/emby/logowhite.png) } -.backgroundContainer,.dialog,html { +.backgroundContainer,html { background: var(--theme-background); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; @@ -94,20 +135,20 @@ html { } .paper-icon-button-light-tv:focus,.paper-icon-button-light:active { - color: var(--theme-primary-color); + color: rgb(var(--theme-primary-color)); background-color: var(--theme-icon-focus-background) } @media(hover: hover) and (pointer:fine) { .paper-icon-button-light:focus { - color:var(--theme-primary-color); + color:rgb(var(--theme-primary-color)); background-color: var(--theme-icon-focus-background) } } .detailButton-icon,.fab,.raised { - background: var(--button-background); - color: var(--theme-text-color) + background: var(--button-color); + color: var(--button-text); } .detailButton-icon { @@ -116,7 +157,7 @@ html { .emby-select-withcolor { color: inherit; - background: var(--button-background); + background: rgba(0, 0, 0, 0.25); border: var(--line-size) solid transparent } @@ -147,17 +188,18 @@ html { } .fab:focus,.raised:focus { - background: #333 + background: var(--button-color-hover); + color: var(--button-text-hover); } .button-submit:not(.emby-button-tv) { - background: var(--theme-primary-color); - color: #fff + background: var(--button-color); + color: var(--button-text) } .button-submit:not(.emby-button-tv):focus { - background: var(--theme-primary-color-lightened); - color: #fff + background: var(--button-color-hover); + color: var(--button-text-hover) } .emby-select-withcolor>option { @@ -166,11 +208,11 @@ html { } .emby-select-withcolor:focus { - border-color: var(--theme-primary-color)!important + border-color: rgb(var(--theme-primary-color))!important } .emby-select-tv-withcolor:focus { - background-color: var(--theme-primary-color)!important; + background-color: rgb(var(--theme-primary-color))!important; color: #fff!important } @@ -183,15 +225,15 @@ html { } .inputLabelFocused,.selectLabelFocused,.textareaLabelFocused { - color: var(--theme-accent-text-color) + color: rgb(var(--accent-color)) } .button-link { - color: var(--theme-accent-text-color) + color: var(--link-color) } .button-flat-accent { - color: var(--theme-accent-text-color) + color: rgb(var(--accent-color)) } .paperList,.visualCardBox { @@ -202,10 +244,12 @@ html { border: var(--line-size) solid var(--line-background) } -.cardText-secondary,.fieldDescription,.listItemBodyText-secondary,.secondaryText { +.fieldDescription,.listItemBodyText-secondary,.secondaryText { color: var(--theme-body-secondary-text-color) } - +.cardText-secondary { + color: var(--text) +} .cardText-first { color: var(--theme-text-color-opaque) } @@ -221,12 +265,16 @@ html { } .selectionCommandsPanel { - background: var(--theme-primary-color); - color: #fff + background: rgb(var(--theme-primary-color)); + color: var(--label-text-color); +} +.itemSelectionCount { + color: var(--label-text-color)!important; + } .upNextDialog-countdownText { - color: var(--theme-primary-color) + color: rgb(var(--theme-primary-color)) } .alphaPickerButton { @@ -239,7 +287,7 @@ html { } .alphaPickerButton-tv:focus { - background-color: var(--theme-primary-color); + background-color: rgb(var(--theme-primary-color)); color: #fff!important } @@ -257,7 +305,7 @@ html { } .progressring-spiner { - border-color: var(--theme-primary-color) + border-color: rgb(var(--theme-primary-color)) } .mediaInfoText { @@ -274,12 +322,12 @@ html { .emby-input,.emby-textarea { color: inherit; - background: var(--button-background); - border: var(--line-size) solid var(--button-background) + background: rgb(0 0 0 / 25%); + border: var(--line-size) solid rgba(255, 255, 255, 0.1) } .emby-input:focus,.emby-textarea:focus { - border-color: var(--theme-primary-color) + border-color: rgb(var(--theme-primary-color)) } .emby-checkbox:checked+span:before { @@ -287,12 +335,16 @@ html { } .emby-checkbox:checked+span:before { - border-color: var(--theme-primary-color); - background-color: var(--theme-primary-color) + border-color: rgb(var(--theme-primary-color)) !important; + background-color: rgb(var(--theme-primary-color)) !important; + +} +.checkboxLabel::after { + color: var(--label-text-color); } .itemProgressBarForeground { - background-color: var(--theme-primary-color) + background-color: rgb(var(--theme-primary-color)) } .itemProgressBarForeground-recording { @@ -300,11 +352,12 @@ html { } .countIndicator { - background: var(--theme-primary-color) + background: rgb(var(--theme-primary-color)); + color: var(--label-text-color); } .playedIndicator { - background: var(--theme-primary-color) + background: rgb(var(--theme-primary-color)) } .mainDrawer { @@ -324,11 +377,11 @@ html { .navMenuOption-selected { background-color: var(--theme-icon-focus-background)!important; - color: var(--theme-accent-text-color) + color: rgb(var(--accent-color)) } .emby-button-focusscale:focus,.emby-button-focusscale:focus .detailButton-icon { - background: var(--theme-primary-color); + background: rgb(var(--theme-primary-color)); color: #fff } @@ -337,7 +390,7 @@ html { } .emby-tab-button-active { - color: var(--theme-accent-text-color) + color: rgb(var(--accent-color)) } .emby-tab-button-active.emby-button-tv { @@ -345,12 +398,12 @@ html { } .emby-tab-button.emby-button-tv:focus { - color: var(--theme-accent-text-color); + color: rgb(var(--accent-color)); background: 0 0 } .emby-button { - outline-color: var(--theme-primary-color) + outline-color: rgb(var(--theme-primary-color)) } .channelCell,.guide-headerTimeslots,.timeslotHeaders { @@ -408,7 +461,7 @@ html { } .guide-currentTimeIndicatorDot:after { - border-top-color: var(--theme-primary-color) + border-top-color: rgb(var(--theme-primary-color)) } .firstChannelCell { @@ -432,7 +485,7 @@ html { } .channelCell:focus,.programCell:focus { - background-color: var(--theme-primary-color); + background-color: rgb(var(--theme-primary-color)); color: #fff } @@ -469,7 +522,7 @@ html { } .card:focus .card-focuscontent { - border-color: var(--theme-primary-color) + border-color: rgb(var(--theme-primary-color)) } .cardContent-button { @@ -505,7 +558,10 @@ html { } .cardOverlayButtonIcon { - background-color: var(--theme-primary-color) + background-color: rgb(var(--theme-primary-color)) +} +.cardScalable.cardPadder-portrait > div > button > i{ + color: var(--label-text-color) !important; } ::-webkit-scrollbar-track-piece { @@ -521,7 +577,7 @@ html { } .emby-slider { - color: var(--theme-primary-color) + color: rgb(var(--theme-primary-color)) } .emby-slider::-moz-range-track { @@ -529,23 +585,23 @@ html { } .emby-slider::-moz-range-progress { - background: var(--theme-primary-color) + background: rgb(var(--theme-primary-color)) } .emby-slider::-webkit-slider-thumb { - background: var(--theme-primary-color) + background: rgb(var(--theme-primary-color)) } .emby-slider::-moz-range-thumb { - background: var(--theme-primary-color) + background: rgb(var(--theme-primary-color)) } .emby-slider::-ms-thumb { - background: var(--theme-primary-color) + background: rgb(var(--theme-primary-color)) } .emby-slider-background-lower { - background-color: var(--theme-primary-color) + background-color: rgb(var(--theme-primary-color)) } .scrollbuttoncontainer { @@ -567,7 +623,7 @@ html { } .emby-search-tab-button.emby-tab-button-active { - background: var(--theme-accent-text-color)!important + background: rgb(var(--accent-color))!important } .textActionButton.dragging { @@ -575,28 +631,34 @@ html { } .dragging-over.full-drop-target { - background: var(--theme-primary-color)!important; + background: rgb(var(--theme-primary-color))!important; color: #fff!important } .dragging-over-top:before { - background: var(--theme-accent-text-color) + background: rgb(var(--accent-color)) } .dragging-over-bottom:after { - background: var(--theme-accent-text-color) + background: rgb(var(--accent-color)) } - -/* TP CUSTOM */ @media (hover: hover) and (pointer: fine) { -.navMenuOption:hover { - background: rgb(255 255 255 / 15%) !important; -} -} - -.mainDrawer { - background: var(--header-blur-background); - -webkit-backdrop-filter: saturate(1.8) blur(1.5em); - backdrop-filter: saturate(1.8) blur(1.5em); -} + .navMenuOption:hover:not(.navMenuOption-selected) { + background: 0 !important; + color: var(--accent-color-hover); + } + } + + .mainDrawer { + background: var(--header-blur-background); + -webkit-backdrop-filter: saturate(1.8) blur(1.5em); + backdrop-filter: saturate(1.8) blur(1.5em); + } + + .jstree-default .jstree-clicked { + background: rgb(var(--accent-color)); + -webkit-border-radius: 2px; + border-radius: 2px; + color: var(--label-text-color) !important; + } \ No newline at end of file diff --git a/CSS/themes/emby/hotline.css b/CSS/themes/emby/hotline.css index e61126f1..a73fe52c 100644 --- a/CSS/themes/emby/hotline.css +++ b/CSS/themes/emby/hotline.css @@ -13,21 +13,22 @@ /* EMBY HOTLINE THEME */ @import url("https://theme-park.dev/CSS/themes/emby/emby-base.css"); +@import url("https://dev.theme-park.dev/CSS/variables/hotline.css"); :root { - --theme-primary-color: #F44336; - --theme-text-color: #eee; - --theme-text-color-opaque: #fff; - --theme-accent-text-color: #F44336; - --theme-primary-color-lightened: rgba(244, 67, 54, 0.2); - --theme-icon-focus-background: rgba(244, 67, 54, 0.2); + --theme-primary-color: var(--accent-color); + --theme-text-color: var(--text); + --theme-text-color-opaque: var(--text-hover); + --theme-accent-text-color: var(--accent-color); + --theme-primary-color-lightened: var(--accent-color-hover); + --theme-icon-focus-background: rgba(var(--accent-color), 0.2); - --theme-background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; + --button-background: var(--button-color); --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;; + --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); --header-background: var(--theme-background); @@ -39,24 +40,24 @@ @media (pointer: fine) { :not(.layout-tv):root { - --theme-background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; --docked-drawer-background: rgba(0, 0, 0, 0.25); --button-background: #1f1f1f; --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;; + --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); } } .layout-tv:root { - --theme-background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; --docked-drawer-background: rgba(0, 0, 0, 0.25); --button-background: #1f1f1f; --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;; + --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); } \ No newline at end of file diff --git a/CSS/themes/emby/organizr-dark.css b/CSS/themes/emby/organizr-dark.css index a2e78ed5..3e52d99d 100644 --- a/CSS/themes/emby/organizr-dark.css +++ b/CSS/themes/emby/organizr-dark.css @@ -13,22 +13,22 @@ /* EMBY ORGANIZR-DARK THEME */ @import url("https://theme-park.dev/CSS/themes/emby/emby-base.css"); - +@import url("https://dev.theme-park.dev/CSS/variables/organizr-dark.css"); :root { - --theme-primary-color: #2cabe3; - --theme-text-color: #96a2b4; - --theme-text-color-opaque: #fff; - --theme-accent-text-color: #2cabe3; - --theme-primary-color-lightened: rgba(44, 171, 227 , 0.8); - --theme-icon-focus-background: rgba(44, 171, 227 , 0.2); + --theme-primary-color: var(--accent-color); + --theme-text-color: var(--text); + --theme-text-color-opaque: var(--text-hover); + --theme-accent-text-color: var(--accent-color); + --theme-primary-color-lightened: var(--accent-color-hover); + --theme-icon-focus-background: rgba(var(--accent-color), 0.2); - --theme-background: #1f1f1f; + --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; - --docked-drawer-background: #1C1C1E; - --button-background: #242424; - --card-background: #242424; - --footer-background: #1d1d1d; + --docked-drawer-background: rgba(0, 0, 0, 0.25); + --button-background: var(--button-color); + --card-background: rgba(0, 0, 0, 0.15); + --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); --header-background: var(--theme-background); @@ -40,24 +40,24 @@ @media (pointer: fine) { :not(.layout-tv):root { - --theme-background: #1f1f1f; + --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; - --docked-drawer-background: #1C1C1E; - --button-background: #242424; - --card-background: #242424; - --footer-background: #1d1d1d; + --docked-drawer-background: rgba(0, 0, 0, 0.25); + --button-background: #1f1f1f; + --card-background: rgba(0, 0, 0, 0.15); + --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); } } .layout-tv:root { - --theme-background: #1f1f1f; + --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; - --docked-drawer-background: #1C1C1E; - --button-background: #242424; - --card-background: #242424; - --footer-background: #1d1d1d; + --docked-drawer-background: rgba(0, 0, 0, 0.25); + --button-background: #1f1f1f; + --card-background: rgba(0, 0, 0, 0.15); + --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); } \ No newline at end of file diff --git a/CSS/themes/emby/plex.css b/CSS/themes/emby/plex.css index 431c2992..a7d5f365 100644 --- a/CSS/themes/emby/plex.css +++ b/CSS/themes/emby/plex.css @@ -13,21 +13,22 @@ /* EMBY PLEX THEME */ @import url("https://theme-park.dev/CSS/themes/emby/emby-base.css"); +@import url("https://dev.theme-park.dev/CSS/variables/plex.css"); :root { - --theme-primary-color: #e5a00d; - --theme-text-color: #eee; - --theme-text-color-opaque: #fff; - --theme-accent-text-color: #e5a00d; - --theme-primary-color-lightened: rgba(229, 161, 13, 0.2); - --theme-icon-focus-background: rgba(229, 161, 13, 0.2); + --theme-primary-color: var(--accent-color); + --theme-text-color: var(--text); + --theme-text-color-opaque: var(--text-hover); + --theme-accent-text-color: var(--accent-color); + --theme-primary-color-lightened: var(--accent-color-hover); + --theme-icon-focus-background: rgba(var(--accent-color), 0.2); - --theme-background: 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; + --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; + --button-background: var(--button-color); --card-background: rgba(0, 0, 0, 0.15); - --footer-background: 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;; + --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); --header-background: var(--theme-background); @@ -39,24 +40,24 @@ @media (pointer: fine) { :not(.layout-tv):root { - --theme-background: 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; + --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; --docked-drawer-background: rgba(0, 0, 0, 0.25); --button-background: #1f1f1f; --card-background: rgba(0, 0, 0, 0.15); - --footer-background: 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;; + --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); } } .layout-tv:root { - --theme-background: 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; + --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; --docked-drawer-background: rgba(0, 0, 0, 0.25); --button-background: #1f1f1f; --card-background: rgba(0, 0, 0, 0.15); - --footer-background: 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;; + --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); } \ No newline at end of file diff --git a/CSS/themes/emby/space-gray.css b/CSS/themes/emby/space-gray.css index e658a49c..21007729 100644 --- a/CSS/themes/emby/space-gray.css +++ b/CSS/themes/emby/space-gray.css @@ -13,21 +13,22 @@ /* EMBY SPACE GRAY THEME */ @import url("https://theme-park.dev/CSS/themes/emby/emby-base.css"); +@import url("https://dev.theme-park.dev/CSS/variables/space-gray.css"); :root { - --theme-primary-color: #81a6b7; - --theme-text-color: #eee; - --theme-text-color-opaque: #fff; - --theme-accent-text-color: #81a6b7; - --theme-primary-color-lightened: rgba(129, 166, 183, 0.2); - --theme-icon-focus-background: rgba(129, 166, 183, 0.2); + --theme-primary-color: var(--accent-color); + --theme-text-color: var(--text); + --theme-text-color-opaque: var(--text-hover); + --theme-accent-text-color: var(--accent-color); + --theme-primary-color-lightened: var(--accent-color-hover); + --theme-icon-focus-background: rgba(var(--accent-color), 0.2); - --theme-background: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; --docked-drawer-background: rgba(0, 0, 0, 0.25); - --button-background: #1f1f1f; + --button-background: var(--button-color); --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;; + --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); --header-background: var(--theme-background); @@ -39,24 +40,24 @@ @media (pointer: fine) { :not(.layout-tv):root { - --theme-background: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; --docked-drawer-background: rgba(0, 0, 0, 0.25); --button-background: #1f1f1f; --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;; + --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); } } .layout-tv:root { - --theme-background: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; --docked-drawer-background: rgba(0, 0, 0, 0.25); --button-background: #1f1f1f; --card-background: rgba(0, 0, 0, 0.15); - --footer-background: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;; + --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); } \ No newline at end of file diff --git a/CSS/variables/hotline.css b/CSS/variables/hotline.css index 2bd31810..eda1f23c 100644 --- a/CSS/variables/hotline.css +++ b/CSS/variables/hotline.css @@ -13,7 +13,7 @@ --button-text-hover: #FFF; --accent-color: 244, 67, 54; - --accent-color-hover: #0b3161; + --accent-color-hover: rgb(var(--accent-color),.8); --link-color: #ddd; --link-color-hover: #fff; --label-text-color: #fff;