diff --git a/CSS/themes/plex/aquamarine.css b/CSS/themes/plex/aquamarine.css index fe44ced3..320d004d 100644 --- a/CSS/themes/plex/aquamarine.css +++ b/CSS/themes/plex/aquamarine.css @@ -13,11 +13,18 @@ /* PLEX AQUAMARINE THEME */ @import url(https://gilbn.github.io/theme.park/CSS/themes/plex/plex-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 top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --link-color: #009688; - --button-color: #009688; - --button-color-hover: #12afa0; - --accent-color: #009688; - --poster-unwatched: #00d374; - } \ No newline at end of file + --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: #00d374; +} \ No newline at end of file diff --git a/CSS/themes/plex/dark.css b/CSS/themes/plex/dark.css index 25524c5f..26bd50b5 100644 --- a/CSS/themes/plex/dark.css +++ b/CSS/themes/plex/dark.css @@ -15,9 +15,16 @@ :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; - --link-color: #e5a00d; + --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); - --accent-color: #e5a00d; + --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: #00d374; - } \ No newline at end of file +} \ No newline at end of file diff --git a/CSS/themes/plex/hotline.css b/CSS/themes/plex/hotline.css index 5e2be2c9..2c1f04b4 100644 --- a/CSS/themes/plex/hotline.css +++ b/CSS/themes/plex/hotline.css @@ -13,12 +13,18 @@ /* PLEX HOTLINE THEME */ @import url(https://gilbn.github.io/theme.park/CSS/themes/plex/plex-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 top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --link-color: #FFEB3B; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --poster-unwatched: #00d374; - } \ No newline at end of file + --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: #00d374; +} \ No newline at end of file diff --git a/CSS/themes/plex/organizr-dark.css b/CSS/themes/plex/organizr-dark.css index 6b80d5a7..3c3669fe 100644 --- a/CSS/themes/plex/organizr-dark.css +++ b/CSS/themes/plex/organizr-dark.css @@ -15,9 +15,16 @@ :root { --main-bg-color: #1f1f1f; --modal-bg-color: #1b1b1b; - --link-color: #2cabe3; + --text-color: #96a2b4; + --text-color-hover: #fff; + --text-muted: #ddd; --button-color: #2cabe3; --button-color-hover: rgb(44 171 227 / .8); - --accent-color: #2cabe3; + --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 faa2253b..e18663a6 100644 --- a/CSS/themes/plex/plex-base.css +++ b/CSS/themes/plex/plex-base.css @@ -15,445 +15,338 @@ outline: none; } -#plex > div.FullPageBackground-backgroundContainer-3pQGmT > div > div:nth-child(2) { - background: var(--main-bg-color); +/* TEXT */ +body, +h1, +h2, +h3, +h4, +h5, +p, +label { + color: var(--text-color) !important; } -.Link-primary-3jzk1w { - color: var(--link-color) !important; +.text-muted { + color: var(--text-muted); } -.DisclosureArrow-isSelected-2pyYzm { - border-color: var(--link-color); -} - -.Link-isSelected-2ZBOC { - color: var(--accent-color); -} - -.ServerSettingsServerMenuButton-button-156qhk { - -webkit-filter: none !important; - filter: none !important; -} - -.NavBarActivityButton-isHighlighted-2YqjDs:hover .NavBarActivityButton-activityIcon-3gF_TD { - background-color: var(--button-color-hover); -} - -.NavBarActivityButton-isHighlighted-2YqjDs .NavBarActivityButton-label-O3mt7Y { - color: var(--link-color); -} - -.NavBarActivityButton-isHighlighted-2YqjDs .NavBarActivityButton-activityIcon-3gF_TD { - background-color: var(--link-color); -} -.NavBarActivityButton-isHighlighted-2YqjDs:hover .NavBarActivityButton-label-O3mt7Y { - color: var(--button-color-hover); -} +/* LINKS */ -.PageHeaderTabButton-isSelected--LulaD { - background-color: rgba(0, 0, 0, .15); - color: var(--link-color); +a, +[class*="Link-primary"], +[class*="Link-isSelected"] { + color: var(--link-color) } -.btn-primary, -.Button-primary-BXmP5W { - border-color: var(--button-color); - background-color: var(--button-color); - -} -.Button-primary-3Mfwv1.isDisabled { - background-color: var(--button-color); - color: rgba(0,0,0,.4); - opacity: .4; -} -.btn-primary:focus, -.btn-primary:hover, -.Button-primary-BXmP5W:hover { - color: #fff; - background-color: var(--button-color-hover); +a:hover { + color: var(--link-color-hover); } -.Button-primary-3Mfwv1.isDisabled, -.btn-primary.disabled, -.btn-primary.disabled.active, -.btn-primary.disabled:active, -.btn-primary.disabled:focus, -.btn-primary.disabled:hover, -.btn-primary[disabled], -.btn-primary[disabled].active, -.btn-primary[disabled]:active, -.btn-primary[disabled]:focus, -.btn-primary[disabled]:hover, -fieldset[disabled] .btn-primary, -fieldset[disabled] .btn-primary.active, -fieldset[disabled] .btn-primary:active, -fieldset[disabled] .btn-primary:focus, -fieldset[disabled] .btn-primary:hover { - background-color: var(--button-color); +/* BODY */ +[class*="FullPageBackground-backgroundContainer"] [class*="CrossFadeImage-crossFade"], +#plex>[class*="FullPageBackground-backgroundContainer"]>div>div:nth-child(2) { + background: var(--main-bg-color) !important; } -.background, -.background-container { - opacity: 0; - transition: opacity .5s; +[class*="BottomBar-bottomBar-"] { + background-color: rgb(0 0 0 / 70%); + box-shadow: 0 0 4px 0 rgb(0 0 0 / 50%); } -.MetadataPosterCardOverlay-isActionsMenuOpen-1K9yNU .MetadataPosterCardOverlay-background-2EwyB, -.MetadataPosterCardOverlay-overlay-1giDeK:hover .MetadataPosterCardOverlay-background-2EwyB { - background: -webkit-radial-gradient(50% 50% farthest-corner, rgba(0, 0, 0, 0.5) 0, #000000 100%) !important; - background: radial-gradient(farthest-corner at 50% 50%, rgba(0, 0, 0, 0.5) 50%, #000000 100%) !important; +/* SIDEBAR */ +[class*="SourceSidebar-openSidebar"], +[class*="SourceSidebar-sidebar"] { + background: rgba(0, 0, 0, .25) !important; } -/* Sidebar */ -.SourceSidebar-openSidebar-1KW2H8, -.SourceSidebar-collapsedSidebar-2U6H_u { - background: rgba(0, 0, 0, 0.45); +[class*="DisclosureArrow-isSelected"] { + border-color: rgb(var(--accent-color)); } -.SourceSidebar-expandedSidebar-2nQ2kA { - background: rgba(0, 0, 0, 0.95); +[class*="SourceSidebarLink-isSelected"] { + box-shadow: inset 4px 0 0 0 rgb(var(--accent-color)) !important; } -/* Navbar */ -.NavBar-container-1YySYJ { - background: rgba(0, 0, 0, 0.45); +/* NAVBAR */ +[class*="NavBar-container"] { + background: rgba(0, 0, 0, .25) !important; } -.Menu-menu-2zqgoE { - background: var(--modal-bg-color); +[class*="NavBarActivityButton-isHighlighted"] [class*="NavBarActivityButton-activityIcon"] { + background: rgb(var(--accent-color)); + color: #000; } -/*Text*/ -.help-block, -.ClaimedServer-messageHeader-ZDhlAv, -.btn-gray, -.text-muted label { - color: #fff; -} +[class*="NavBarActivityButton-isHighlighted"]:hover [class*="NavBarActivityButton-activityIcon"] { + background-color: var(--accent-color-hover); -/*Agents*/ -.nav-pills>li.active>a, -.nav-pills>li.active>a:focus, -.nav-pills>li.active>a:hover { - background-color: rgba(0, 0, 0, 0.25); } -/*Modal*/ -.modal-header, -.modal-footer, -.modal-body-with-panes, -.ModalHeader-modalHeader-aJOI_i, -.EditHomeModalContent-modalBody-1Poux5, -.EditHomeModalContent-footer-G8dmWw { - background: var(--modal-bg-color); +[class*="NavBarActivityButton-isHighlighted"] [class*="NavBarActivityButton-label"] { + color: rgb(var(--accent-color)); } -.modal-header, -.ModalHeader-modalHeader-aJOI_i { - border-bottom: 1px solid rgba(255, 255, 255, 0.08); +[class*="NavBarActivityButton-isHighlighted"]:hover [class*="NavBarActivityButton-label"] { + color: var(--accent-color-hover); } -.modal-footer, -.EditHomeModalContent-footer-G8dmWw { - border-top: 1px solid rgba(255, 255, 255, 0.08); -} -.modal-body { - background: var(--modal-bg-color); -} -body>div.user-select-modal.modal.modal-transparent.fade.in>div>div.modal-content>div>div.modal-body { - background: none; -} -#pin-form>div { - background: none; -} +/* ACCENTS */ -.modal-list { - background-color: rgba(0, 0, 0, 0.25); +[class*="PageHeaderTabButton-isSelected"], +[class*="PageHeaderTabDropdown-isSelected"], +[class*="MultiSelectPageHeader-selectedTitle"] { + color: rgb(var(--accent-color)); + border-color: rgb(var(--accent-color)); } -.match-result-list-item>.match-result .match-score-info { - color: #eee; +[class*="MetadataPosterCardOverlay-unplayedBadge"], +[class*="MetadataPosterCard-legacyUnwatchedTag-"] { + background-color: var(--poster-unwatched); } -.fix-incorrect-match-modal .match-location { - color: #eee; +[class*="MetadataPosterCardFace"]:hover, +[class*="PosterCardLink-hoveredLink"] { + box-shadow: 0 0 0 1px rgb(var(--accent-color)), 0 0 4px rgb(0 0 0 / 30%); } -/*Modal icon color*/ -.edit-section-modal .wizard-blocks-group>.wizard-block { - color: #ffffff; +[class*="MultiSelectPageHeader-multiSelectPageHeader"] { + box-shadow: 0 2px 0 0 rgb(var(--accent-color)); } -.edit-lock-addon { - color: #ffffff; - background-color: rgba(0, 0, 0, 0.25); - border-color: #32323200; +[class*="MetadataPosterCardFace-isSelected"] { + box-shadow: 0 0 0 2px rgb(var(--accent-color)), 0 0 4px rgb(0 0 0 / 30%); } -.well { - background-color: rgba(0, 0, 0, 0.25); - border: 1px solid transparent; +[class*="SelectButton-isSelected"] [class*="SelectButton-selectCircle"] { + border-color: rgb(var(--accent-color)); + background-color: rgb(var(--accent-color)); + box-shadow: 0 0 4px rgb(0 0 0 / 60%); + color: rgba(0, 0, 0, .75); + transform: scale(1.4); } -.files ul li { - color: #fff; +[class*="PlayButton-playButton"]:hover [class*="PlayButton-playCircle-"], +[class*="PlayPauseOverlay-playCircle-"] { + border-color: rgb(var(--accent-color)); + background-color: rgb(var(--accent-color)); + color: #1f2326; } - -.MetadataPosterCardFace-face-3oaw1P:hover { - box-shadow: 0 0 0 2px var(--accent-color); +[class*="PosterCardOverlayProgress-progressBar"], +[class*="MetadataPosterCardProgressBar-bar"], +[class*="SeekBar-seekBarFill-"], +[class*="VolumeSlider-fill-"], +[class*="SessionTile-playProgressPercent"] { + background-color: rgb(var(--accent-color)); } -.PlayButton-playButton-3g-Gk-:hover .PlayButton-playCircle-2hG_PH { - border-color: var(--accent-color); - background-color: var(--accent-color); +[class*="SeekBar-seekBarBuffer"], +[class*="SessionTile-transcodeProgressPercent"] { + background-color: rgba(var(--accent-color), .3); } -.PageHeaderTabDropdown-isSelected-1ERAX6 { - border-color: var(--accent-color); +[class*="SessionTileDetails-playerContainer"] { + background-color: rgb(var(--accent-color), .2) } -.SelectedMenuItem-isSelected-2P2GgF, -.SelectedMenuItem-isSelected-2P2GgF .SelectedMenuItem-selectedIcon-1JCon { - color: var(--accent-color); +[class*="SessionTileDetails-videoStreamInformation"] { + background-color: rgb(var(--accent-color), .15) } -.Badge-primary-3UX8_g, -.alert-bar.notify { - background-color: var(--accent-color); +[class*="SessionTileDetails-audioStreamInformation"] { + background-color: rgb(var(--accent-color), .1) } -.PrePlayCastCell-posterCardLinkContainer-1Ce-QB:hover { - box-shadow: 0 0 0 2px var(--accent-color); +[class*="SelectedMenuItem-isSelected"], +[class*="SelectedMenuItem-isSelected"] [class*="SelectedMenuItem-selectedIcon"], +[class*="IconButton-isActive-"] { + color: rgb(var(--accent-color)); } -.SourceSidebarServerHeader-title-2oT9aS { - color: var(--accent-color); - +[class*="IconButton-isActive-"]:hover { + color: rgb(var(--accent-color-hover)); } -.SourceSidebarLink-isSelected-7ttE4w { - box-shadow: inset 4px 0 0 0 var(--accent-color); +[class*="Spinner-spinner"] { + border-color: rgb(var(--accent-color)) transparent transparent rgb(var(--accent-color)); + border-top-color: rgb(var(--accent-color)) !important; + border-left-color: rgb(var(--accent-color)) !important; } -.MetadataPosterCardOverlay-unplayedBadge-OAvdeH { - background-color: var(--poster-unwatched); -} -.PosterCardOverlayProgress-progressBar-1s57tW, -.MetadataPosterCard-legacyMultiVersionBadge-2CCcrj, -.MetadataPosterCardOverlay-unplayedBadge-OAvdeH { - background-color: var(--accent-color); - color: #000; +[class*="CircularProgressBar-circularProgressBar"] { + stroke-width: 2; + stroke: rgb(var(--accent-color)); + stroke-dashoffset: 0; } -.Spinner-spinner-CSMaLA { - border-color: var(--accent-color) transparent transparent var(--accent-color); - border-top-color: var(--accent-color) !important; - border-left-color: var(--accent-color) !important; -} -.CircularProgressBar-circularProgressBar-CcbTjD { -stroke-width: 2; -stroke: var(--accent-color); -stroke-dashoffset: 0; -} .loading { - border-color: var(--accent-color) transparent transparent var(--accent-color); + border-color: rgb(var(--accent-color)) transparent transparent rgb(var(--accent-color)); } -.PlayPauseOverlay-playCircle-1xl6BG { - border-color: var(--accent-color); - background-color: var(--accent-color); +.media-poster-container.selected .media-poster, +.media-poster-container:hover .media-poster { + -webkit-box-shadow: 0 0 4px rgb(0 0 0 / 30%), inset 0 0 0 3px rgb(var(--accent-color)); + box-shadow: 0 0 4px rgb(0 0 0 / 30%), inset 0 0 0 3px rgb(var(--accent-color)); } -.SeekBar-seekBarFill-1x5nN0 { - background-color: var(--accent-color); +.media-poster-container.selected .media-poster:before { + border-color: rgb(var(--accent-color)) rgb(var(--accent-color)) transparent transparent; } -.SeekBar-seekBarBuffer-2Td4tP { - background-color: var(--accent-color); - opacity: .2; +.media-poster-container.selected .media-poster:after { + color: var(--button-text) } -.VolumeSlider-fill-1JmRfE { - background-color: var(--accent-color); +[class*="NavBarActivityMenuStatusItem-statusButtonIndicator"] { + color: rgb(var(--accent-color)); } -.IconButton-isActive-3RXALk { - color: var(--accent-color); +/* MODAL */ +[class*="ModalContent-modalContent-"] { + background: var(--modal-bg-color); } -.IconButton-isActive-3RXALk:hover { - color: var(--accent-color); - opacity: .7 +.modal-header { + padding: 15px 20px; + background: var(--modal-bg-color); + border-bottom: 1px solid rgba(255, 255, 255, .05); } -.MetadataPosterCardFace-isSelected-2dld-q { - box-shadow: 0 0 0 2px var(--accent-color); +.modal-content { + position: relative; + background: var(--modal-bg-color); + border: 1px solid #999; + border: 1px solid rgba(0, 0, 0, .2); + border-radius: 3px; + -webkit-box-shadow: 0 3px 9px rgb(0 0 0 / 50%); + box-shadow: 0 3px 9px rgb(0 0 0 / 50%); + background-clip: padding-box; + outline: none; } -.SelectButton-isSelected-1XM2EB .SelectButton-selectCircle-16d-90 { - border-color: var(--accent-color); - background-color: var(--accent-color); - color: #000; -} -.SelectButton-selectedCircle-2zHVBT { - border-color: var(--button-color); - background-color: var(--button-color); - color: #000; -} -.SelectButton-selectButton-1C3dP4.isActive .SelectButton-selectCircle-2NTkCS, -.SelectButton-selectButton-Yy19xn.isActive .SelectButton-selectCircle-16d-90 { - background-color: var(--button-color); -} -.btn-gray.selected { - color: var(--accent-color); +.modal-footer { + padding: 15px 20px; + margin-top: 0; + background: var(--modal-bg-color); + border-top: 1px solid rgba(255, 255, 255, .05); } -a { - color: var(--link-color); +.well, +.files ul li { + color: var(--text-color); + background-color: rgb(255 255 255 / 10%); + border: 1px solid transparent; + -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%); + box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%); } -a:hover, .artwork-file-container:hover a { - color: #eee; +.edit-section-modal .wizard-blocks-group>.wizard-block.selectable:hover { + color: var(--text-color-hover); + background-color: rgba(255, 255, 255, .05); } -.media-poster-container.selected .media-poster { - -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .3), inset 0 0 0 3px var(--accent-color); - box-shadow: 0 0 4px rgba(0, 0, 0, .3), inset 0 0 0 3px var(--accent-color); +.edit-section-modal .wizard-blocks-group>.wizard-block.selectable { + color: var(--text-color) } -.media-poster-container.selected .media-poster:before { - border-color: var(--accent-color) var(--accent-color) transparent transparent; +.striped-list-item>.striped-list-inner-item>.selected, +.striped-list-item>a.selected { + border-left: 3px solid rgb(var(--accent-color)); } -.force-hover .media-poster-container .media-poster, -.force-hover .media-poster-container .media-poster-fade, -.media-poster-container:focus .media-poster, -.media-poster-container:focus .media-poster-fade, -.media-poster-container:hover .media-poster, -.media-poster-container:hover .media-poster-fade { - -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .3), inset 0 0 0 2px var(--accent-color); - box-shadow: 0 0 4px rgba(0, 0, 0, .3), inset 0 0 0 2px var(--accent-color); +.modal-header>h4>.modal-icon { + color: var(--text-color-hover); } -.label-primary { +/* BUTTONS */ +.btn-primary { + border-color: var(--button-color); + color: #fff; background-color: var(--button-color); + -webkit-transition: background-color .1s; + transition: background-color .1s; } -.label-primary[href]:focus, -.label-primary[href]:hover { - background-color: var(--button-color-hover); +.btn-primary:focus, +.btn-primary:hover { + color: #fff; background-color: var(--button-color-hover); } -.Link-isSelected-2ZBOCj { - color: var(--accent-color); -} - -.Link-link-3v-v0b:hover { - color: #fff !important; -} - -.SessionTile-playProgressPercent-1ptKaF { - background-color: var(--accent-color); +[class*="Button-primary"].isDisabled { + background: var(--button-color); } -.SessionTile-transcodeProgressPercent-2KFcyo { - background-color: var(--accent-color); - opacity: .3; -} - -.edit-section-modal .wizard-blocks-group>.wizard-block.selected, -.edit-section-modal .wizard-blocks-group>.wizard-block.selected:hover { - color: var(--accent-color); -} - -.ServerMenuItem-selectedServerMenuItem-2adnD7 { - color: var(--accent-color); -} - -.ServerMenuItem-selectedIcon-g_vsnY { - color: var(--accent-color); -} - -.NavBarActivityMenuStatusItem-statusButtonIndicator-2cc7cL { - color: var(--accent-color); -} - -.MetadataTitleProgress-unwatchedCircle-1x2O97 { - background-color: var(--accent-color); -} - -.MultiSelectPageHeader-multiSelectPageHeader-v5rhWY { - box-shadow: 0 2px 0 0 var(--accent-color); -} - -.MultiSelectPageHeader-selectedTitle-iKZPvL { - color: var(--accent-color); +.btn-primary.disabled, +.btn-primary.disabled.active, +.btn-primary.disabled:active, +.btn-primary.disabled:focus, +.btn-primary.disabled:hover, +.btn-primary[disabled], +.btn-primary[disabled].active, +.btn-primary[disabled]:active, +.btn-primary[disabled]:focus, +.btn-primary[disabled]:hover, +fieldset[disabled] .btn-primary, +fieldset[disabled] .btn-primary.active, +fieldset[disabled] .btn-primary:active, +fieldset[disabled] .btn-primary:focus, +fieldset[disabled] .btn-primary:hover { + background-color: var(--button-color); } -.PlexPassUpsell-icon-c1vt03 { - color: var(--accent-color); +.btn-gray.selected { + color: rgb(var(--accent-color)); } -.nav-pills>li.active>a, -.nav-pills>li.active>a:focus, -.nav-pills>li.active>a:hover { - color: var(--accent-color); +.btn-gray { + color: var(--text-color); } .edit-lock-addon.locked { - background-color: var(--accent-color); - border-color: var(--accent-color); -} - -.media-poster-container.selected .media-poster:after { - color: #eee; + color: #fff; + background-color: var(--button-color); + border-color: var(--button-color); } -.PosterCardLink-hoveredLink-3BYG1D { - box-shadow: 0 0 0 1px var(--accent-color), 0 0 4px rgba(0, 0, 0, .3) +.edit-lock-addon { + color: var(--button-color-hover); + background-color: rgba(0, 0, 0, .5); + border-color: transparent; + -webkit-box-shadow: 0 0 2px rgb(0 0 0 / 30%), inset -2px 2px 2px rgb(0 0 0 / 10%); + box-shadow: 0 0 2px rgb(0 0 0 / 30%), inset -2px 2px 2px rgb(0 0 0 / 10%); } -.MetadataPosterCard-legacyUnwatchedTag-2p_o9e { - background-color: var(--poster-unwatched); +.edit-section-modal .wizard-blocks-group>.wizard-block.selected, +.edit-section-modal .wizard-blocks-group>.wizard-block.selected:hover { + color: rgb(var(--accent-color)); } -.MetadataPosterCardProgressBar-bar-28PJbT { - background-color: var(--accent-color); - transition: transform .6s ease-in-out; +.edit-section-modal .wizard-blocks-group>.wizard-block { + color: var(--text-color); } -.Button-primary-3Mfwv1 { +[class*="Button-primary-"] { background-color: var(--button-color); - color: #fff; + color: var(--button-text); } -.Button-primary-3Mfwv1:hover { +[class*="Button-primary-"]:hover { background-color: var(--button-color-hover); - color: #fff; + color: var(--button-text-hover); } -.Spinner-spinner-5E5Wk_ { - border-color: var(--accent-color) transparent transparent var(--accent-color); -} - -.PageHeaderMultiselectActions-container-5A7tEU { - border: 2px solid var(--accent-color); +/* DROPDOWN MENU */ +[class*="Menu-menu"] { + background: var(--modal-bg-color); } -.PageHeaderMultiselectActions-count-HmMkQF { - color: var(--accent-color); -} -.MetadataPosterCard-legacyUnwatchedEpisodesBadge-PxtEaD { - background-color: var(--poster-unwatched); - color: #ffffff; -} -.MetadataPosterCard-hoveredSelectedLink-3XsEZh, .MetadataPosterCard-selectedLink-2yBNf3 { - box-shadow: 0 0 0 2px var(--accent-color), 0 0 4px rgba(0,0,0,.3); -} +[class*="ServerMenuItem-selectedServerMenuItem"], +[class*="ServerMenuItem-selectedIcon"] { + color: rgb(var(--accent-color)); +} \ No newline at end of file diff --git a/CSS/themes/plex/space-gray.css b/CSS/themes/plex/space-gray.css index bd2d47a6..a9e2a0e4 100644 --- a/CSS/themes/plex/space-gray.css +++ b/CSS/themes/plex/space-gray.css @@ -14,11 +14,17 @@ @import url(https://gilbn.github.io/theme.park/CSS/themes/plex/plex-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; - --link-color: #70aeca; - --button-color: #70aeca; + --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; - --accent-color: #70aeca; - --accent-color-hover: #81a6b7; + --button-text: #eee; + --button-text-hover: #fff; + --accent-color: 129, 166, 183; + --accent-color-hover: #607D8B; + --link-color: #9adfff; + --link-color-hover: #FFF; --poster-unwatched: #70aeca; } \ No newline at end of file