From f921acf5de396d7a87520d3744d5b3d92c4951e8 Mon Sep 17 00:00:00 2001 From: Marius <24592972+gilbN@users.noreply.github.com> Date: Sat, 10 Jul 2021 13:46:40 +0200 Subject: [PATCH] moved plex to new var setup --- CSS/themes/plex/aquamarine.css | 16 +--- CSS/themes/plex/dark.css | 16 +--- CSS/themes/plex/dracula.css | 19 +---- CSS/themes/plex/hotline.css | 16 +--- CSS/themes/plex/organizr-dark.css | 16 +--- CSS/themes/plex/plex-base.css | 126 ++++++++++++++++++++++++++---- CSS/themes/plex/space-gray.css | 16 +--- 7 files changed, 127 insertions(+), 98 deletions(-) diff --git a/CSS/themes/plex/aquamarine.css b/CSS/themes/plex/aquamarine.css index 2f6f7681..1f16a083 100644 --- a/CSS/themes/plex/aquamarine.css +++ b/CSS/themes/plex/aquamarine.css @@ -12,19 +12,9 @@ /* PLEX AQUAMARINE THEME */ @import url(https://theme-park.dev/CSS/themes/plex/plex-base.css); +@import url(https://theme-park.dev/CSS/variables/aquamarine.css); + +/* APP VARS*/ :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 top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --text-color: #eee; - --text-color-hover: #fff; - --text-muted: #ddd; - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --button-text-hover: #FFF; - --accent-color: 18, 175, 160; - --accent-color-hover: #fff; - --link-color: #0ed2bf; - --link-color-hover: #FFF; --poster-unwatched: #15D5C2; } \ No newline at end of file diff --git a/CSS/themes/plex/dark.css b/CSS/themes/plex/dark.css index a7a74784..0a854d71 100644 --- a/CSS/themes/plex/dark.css +++ b/CSS/themes/plex/dark.css @@ -12,19 +12,9 @@ /* PLEX DARK THEME */ @import url(https://theme-park.dev/CSS/themes/plex/plex-base.css); +@import url(https://theme-park.dev/CSS/variables/dark.css); + +/* APP VARS*/ :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; - --text-color: #b7b7b7; - --text-color-hover: #fff; - --text-muted: #ddd; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: 229, 160, 13; - --accent-color-hover: #ffffff73; - --link-color: #e5a00d; - --link-color-hover: #FFF; --poster-unwatched: #e5a00d; } \ No newline at end of file diff --git a/CSS/themes/plex/dracula.css b/CSS/themes/plex/dracula.css index fccd3387..bc83148e 100644 --- a/CSS/themes/plex/dracula.css +++ b/CSS/themes/plex/dracula.css @@ -12,22 +12,9 @@ /* PLEX DRACULA THEME */ @import url(https://theme-park.dev/CSS/themes/plex/plex-base.css); -:root { - --main-bg-color: #282a36; - --modal-bg-color: #282a36; - - --button-color: #bd93f9; - --button-color-hover: #ff79c6; - --button-text: #eee; - --button-text-hover: #FFF; +@import url(https://theme-park.dev/CSS/variables/dracula.css); - --accent-color: 80, 250, 123; - --accent-color-hover: #50fa7b; - --link-color: #ff79c6; - --link-color-hover: #8be9fd; +/* APP VARS*/ +:root { --poster-unwatched: #bd93f9; - - --text-color: #6272a4; - --text-color-hover: #95adfa; - --text-muted: #999; } \ No newline at end of file diff --git a/CSS/themes/plex/hotline.css b/CSS/themes/plex/hotline.css index 46c169dd..9399a79a 100644 --- a/CSS/themes/plex/hotline.css +++ b/CSS/themes/plex/hotline.css @@ -12,19 +12,9 @@ /* PLEX HOTLINE THEME */ @import url(https://theme-park.dev/CSS/themes/plex/plex-base.css); +@import url(https://theme-park.dev/CSS/variables/hotline.css); + +/* APP VARS*/ :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 top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --text-color: #eee; - --text-color-hover: #fff; - --text-muted: #ddd; - --button-color: #0b3161; - --button-color-hover: rgb(244, 67, 54); - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: 244, 67, 54; - --accent-color-hover: rgba(255, 255, 255, .5); - --link-color: #f44336; - --link-color-hover: #FFF; --poster-unwatched: #FB3122; } \ No newline at end of file diff --git a/CSS/themes/plex/organizr-dark.css b/CSS/themes/plex/organizr-dark.css index 4fdf3c59..09edc601 100644 --- a/CSS/themes/plex/organizr-dark.css +++ b/CSS/themes/plex/organizr-dark.css @@ -12,19 +12,9 @@ /* PLEX ORGANIZR-DARK THEME */ @import url(https://theme-park.dev/CSS/themes/plex/plex-base.css); +@import url(https://theme-park.dev/CSS/variables/organizr-dark.css); + +/* APP VARS*/ :root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --text-color: #96a2b4; - --text-color-hover: #fff; - --text-muted: #ddd; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: 44, 171, 227; - --accent-color-hover: #fff; - --link-color: #2cabe3; - --link-color-hover: #FFF; --poster-unwatched: #2cabe3; } \ No newline at end of file diff --git a/CSS/themes/plex/plex-base.css b/CSS/themes/plex/plex-base.css index 06a337ad..04e8b459 100644 --- a/CSS/themes/plex/plex-base.css +++ b/CSS/themes/plex/plex-base.css @@ -16,15 +16,47 @@ /* TEXT */ body, +p, +label, +[class*="PrePlaySummary-summary-"], +[class*="ClaimedServer-messageHeader-"], +[class*="MetadataPosterCardTitle-isSecondary-"], +[class*="MetadataPosterCardTitle-isSecondary-"] a { + color: var(--text) !important; +} + +[class*="SourceSidebarLink-title-"], +[class*="SourceSidebarLink-sourceLink-"], +[class*="Link-default-"], +[class*="PrePlayTertiaryTitle-tertiaryTitle-"] { + color: var(--text); +} + h1, h2, h3, h4, h5, -p, -label, -[class*="ClaimedServer-messageHeader-"] { - color: var(--text-color) !important; +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +[class*="PrePlayPrimaryTitle-primaryTitle-"] a, +[class*="PrePlayLeftTitle-leftTitle-"], +[class*="PrePlayPrimaryTitle-primaryTitle-"], +[class*="CollapsibleText-readMore-"], +[class*="HubTitle-hubTitle-"], +[class*="FormLabel-label-"], +[class*="ServerDashboardPageHeader-headerTitle-"], +[class*="SidebarList-sidebarListHeader-"], +[class*="MenuHeader-menuHeader-WuKJVD"], +[class*="PrePlayDetailsGroupItem-label-"], +[class*="PageHeader-pageHeader-"], +[class*="PageHeaderTitle-title-"] { + color: var(--text-hover) !important; } .text-muted { @@ -35,19 +67,34 @@ label, a, [class*="Link-primary-"], -[class*="Link-isSelected-"] { +[class*="Link-isSelected-"], +[class*="PrePlayDetailsGroupItem-groupItem-"] a, +[class*="MetadataPosterCardTitle-title-"] a, a[class*="MetadataPosterCardTitle-title-"], +[class*="PrePlayTagListLink-tagsListLink-"][class*="Link-default-"] { color: var(--link-color) } a:hover, -.artwork-file-container:hover a { +[class*="Link-link-"]:hover, +.artwork-file-container:hover a, +[class*="MetadataPosterCardTitle-title-"] a:hover, a[class*="MetadataPosterCardTitle-title-"]:hover { color: var(--link-color-hover); } +[class*="MetadataPosterCardTitle-title-"][class*="MetadataPosterCardTitle-isSecondary-377V8A"] [class*="Link-link-1Kt-hA"]:hover, +[class*="MetadataPosterCardTitle-title-"][class*="MetadataPosterCardTitle-isSecondary-377V8A"]:hover { + color: var(--text-hover) !important; +} + +[class*="TopUsersCell-playHistoryLink-"][class*="Link-link-"] { + color: var(--label-text-color) !important; +} + /* BODY */ [class*="FullPageBackground-backgroundContainer-"] [class*="CrossFadeImage-crossFade-"], #plex>[class*="background-container-"]>div>div>div:nth-child(2), -#plex>div[class*="FullPageBackground-backgroundContainer-"]>div>div:nth-child(2) { +#plex>div[class*="FullPageBackground-backgroundContainer-"]>div>div:nth-child(2), +#plex > div[class*="FullPageBackground-backgroundContainer-"] > div > div:nth-child(4){ background: var(--main-bg-color) !important; } @@ -57,6 +104,13 @@ a:hover, } /* SIDEBAR */ + +/* TEMP */ +[class*="SourceSidebarLink-isSelected-"] { + box-shadow: inset 2px 0 0 0 rgb(var(--accent-color)); +} +/* /TEMP */ + [class*="SourceSidebar-openSidebar-"][class*="SourceSidebar-sidebar-"], [class*="SourceSidebar-sidebar-"] { background: rgba(0, 0, 0, .25); @@ -70,8 +124,18 @@ a:hover, border-color: rgb(var(--accent-color)); } -[class*="SourceSidebarLink-isSelected-"] { - box-shadow: inset 4px 0 0 0 rgb(var(--accent-color)) !important; +[class*="SourceSidebarLink-isSelected-"]:before { + background-color: rgb(var(--accent-color)) !important; +} + +[class*="SourceSidebarLink-isSelected-"] [class*="SourceSidebarLink-iconContainer-"], +[class*="SourceSidebarLink-isSelected-"] [class*="SourceSidebarLink-title-"] { + color: rgb(var(--accent-color)); +} + +[class*="SourceSidebarLink-sourceLink-"]:hover [class*="SourceSidebarLink-iconContainer-"], +[class*="SourceSidebarLink-sourceLink-"]:hover [class*="SourceSidebarLink-title-"] { + color: var(--accent-color-hover); } [class*="SourceSidebarServerHeader-title-"] { @@ -106,17 +170,39 @@ a:hover, /* ACCENTS */ +.nav-pills>li.active>a, +.nav-pills>li.active>a:focus, +.nav-pills>li.active>a:hover { + color: rgb(var(--accent-color)) +} + +.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { + background-color:rgb(var(--accent-color),.03); + +} +.btn-gray:focus, .btn-gray:hover { + color: var(--accent-color-hover); +} + [class*="PageHeaderTabButton-isSelected-"], [class*="PageHeaderTabDropdown-isSelected-"], [class*="MultiSelectPageHeader-selectedTitle-"], [class*="PageHeaderMultiselectActions-container-"], [class*="PageHeaderMultiselectActions-count-"], [class*="PivotTab-selectedButton-"], -[class*="PivotTabDropdown-isSelected-"] { +[class*="PivotTabDropdown-isSelected-"], +[class*="PageHeaderTitle-detail-"] { color: rgb(var(--accent-color)); border-color: rgb(var(--accent-color)); } +[class*="PivotTab-selectedButton-"]:after { + background-color: rgb(var(--accent-color)); +} +[class*="PivotTab-selectedButton-"]:hover:after { + background-color: var(--link-color-hover); +} + [class*="MetadataPosterCardOverlay-unplayedBadge-"], [class*="MetadataPosterCard-legacyUnwatchedTag-"], [class*="MetadataPosterCard-legacyUnwatchedEpisodesBadge-"], @@ -293,7 +379,7 @@ a:hover, .well, .files ul li { - color: var(--text-color); + color: var(--text); background-color: rgb(255 255 255 / 10%); border: 1px solid transparent; -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%); @@ -301,12 +387,12 @@ a:hover, } .edit-section-modal .wizard-blocks-group>.wizard-block.selectable:hover { - color: var(--text-color-hover); + color: var(--text-hover); background-color: rgba(255, 255, 255, .05); } .edit-section-modal .wizard-blocks-group>.wizard-block.selectable { - color: var(--text-color) + color: var(--text) } .striped-list-item>.striped-list-inner-item>.selected, @@ -315,7 +401,7 @@ a:hover, } .modal-header>h4>.modal-icon { - color: var(--text-color-hover); + color: var(--text-hover); } /* BUTTONS */ @@ -360,7 +446,7 @@ fieldset[disabled] .btn-primary:hover { } .btn-gray { - color: var(--text-color); + color: var(--text); } .edit-lock-addon.locked { @@ -383,7 +469,7 @@ fieldset[disabled] .btn-primary:hover { } .edit-section-modal .wizard-blocks-group>.wizard-block { - color: var(--text-color); + color: var(--text); } [class*="Button-primary-"], @@ -446,11 +532,17 @@ hr { .alerts-container .page-count { margin-right: 15px; font-size: 14px; - color: var(--text-color); + color: var(--text); vertical-align: top; } /* SYNC */ .filter-bar .dropdown.open>a { color: rgb(var(--accent-color)); +} + +/* TABLE */ + +[class*="TableHeaderTitle-tableHeaderTitle-"] { + color: var(--text-hover); } \ No newline at end of file diff --git a/CSS/themes/plex/space-gray.css b/CSS/themes/plex/space-gray.css index 398605af..717a1324 100644 --- a/CSS/themes/plex/space-gray.css +++ b/CSS/themes/plex/space-gray.css @@ -12,19 +12,9 @@ /* PLEX AQUAMARINE THEME */ @import url(https://theme-park.dev/CSS/themes/plex/plex-base.css); +@import url(https://theme-park.dev/CSS/variables/space-gray.css); + +/* APP VARS*/ :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; - --text-color: #eee; - --text-color-hover: #fff; - --text-muted: #ddd; - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: 112, 174, 202; - --accent-color-hover: #81a6b7; - --link-color: #70aeca; - --link-color-hover: #81a6b7; --poster-unwatched: #70aeca; } \ No newline at end of file