From f6dcae14b073625ca2d795650e21975259c9afb1 Mon Sep 17 00:00:00 2001 From: Marius <24592972+gilbN@users.noreply.github.com> Date: Wed, 4 Nov 2020 23:35:24 +0100 Subject: [PATCH] plex fixes after webui update --- CSS/themes/plex/plex-base.css | 241 +++++++++++++++++++++++++++------- 1 file changed, 192 insertions(+), 49 deletions(-) diff --git a/CSS/themes/plex/plex-base.css b/CSS/themes/plex/plex-base.css index e1491200..81762701 100644 --- a/CSS/themes/plex/plex-base.css +++ b/CSS/themes/plex/plex-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -12,111 +11,172 @@ /* https://github.com/gilbN/theme.park */ /* PLEX ORGANIZR THEME */ - body { - background: var(--main-bg-color); - } - .Link-primary-1vcAGA { - color: var(--link-color) !important; +body { + background: var(--main-bg-color); } + +.Link-primary-1vcAGA { + color: var(--link-color) !important; +} + .DisclosureArrow-isSelected-QMJhDY { -border-color: var(--link-color); + border-color: var(--link-color); } -.Link-isSelected-IRm9uM { + +.Link-isSelected-IRm9uM { color: var(--accent-color); } + .ServerSettingsServerMenuButton-button-24D7lE { -webkit-filter: none !important; filter: none !important; } + .NavBarActivityButton-isHighlighted-27qlko:hover .NavBarActivityButton-label-2ZN0gQ { color: var(--button-color-hover); } + .NavBarActivityButton-isHighlighted-27qlko .NavBarActivityButton-activityIcon-1Db2GP { background-color: var(--link-color); } + .NavBarActivityButton-isHighlighted-27qlko .NavBarActivityButton-label-2ZN0gQ { color: var(--link-color); } + .NavBarActivityButton-isHighlighted-27qlko:hover .NavBarActivityButton-activityIcon-1Db2GP { background-color: var(--button-color-hover); } + .PageHeaderTabButton-isSelected-25CIS7 { - background-color: rgba(0,0,0,.15); + background-color: rgba(0, 0, 0, .15); color: var(--link-color); } -.btn-primary, .Button-primary-3fwLzo { + +.btn-primary, +.Button-primary-3fwLzo { border-color: var(--button-color); background-color: var(--button-color); } -.btn-primary:focus, .btn-primary:hover, .Button-primary-3fwLzo:hover { + +.btn-primary:focus, +.btn-primary:hover, +.Button-primary-3fwLzo:hover { color: #fff; - background-color: var( --button-color-hover); + background-color: var(--button-color-hover); } -.Button-primary-3fwLzo.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 { + +.Button-primary-3fwLzo.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); } - .background,.background-container { - opacity: 0; - transition: opacity .5s; - } - .MetadataPosterCardOverlay-isActionsMenuOpen-AvHIX .MetadataPosterCardOverlay-background-2EwyB, - .MetadataPosterCardOverlay-overlay-1uMpL: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; - } + +.background, +.background-container { + opacity: 0; + transition: opacity .5s; +} + +.MetadataPosterCardOverlay-isActionsMenuOpen-AvHIX .MetadataPosterCardOverlay-background-2EwyB, +.MetadataPosterCardOverlay-overlay-1uMpL: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 */ -.SourceSidebar-openSidebar-364QEr,.SourceSidebar-collapsedSidebar-3MDUee { +.SourceSidebar-openSidebar-364QEr, +.SourceSidebar-collapsedSidebar-3MDUee { background: rgba(0, 0, 0, 0.45); } + .SourceSidebar-expandedSidebar-ljacXC { - background: rgba(0, 0, 0, 0.95); + background: rgba(0, 0, 0, 0.95); } + /* Navbar */ .NavBar-container-1T0BJz { background: rgba(0, 0, 0, 0.45); } + .Menu-menu-3XnN6J { background: var(--modal-bg-color); } -/*Text*/ - .help-block, .ClaimedServer-messageHeader-3uzatL, .btn-gray, .text-muted label { - color: #fff; -} -/*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); + +/*Text*/ +.help-block, +.ClaimedServer-messageHeader-3uzatL, +.btn-gray, +.text-muted label { + color: #fff; } -/*Modal*/ -.modal-header, .modal-footer, .modal-body-with-panes, .ModalHeader-modalHeader-1Kf9RW, .EditHomeModalContent-modalBody-2rHN2d, .EditHomeModalContent-footer-10Ix6N { +/*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-1Kf9RW, +.EditHomeModalContent-modalBody-2rHN2d, +.EditHomeModalContent-footer-10Ix6N { background: var(--modal-bg-color); } -.modal-header, .ModalHeader-modalHeader-1Kf9RW { + +.modal-header, +.ModalHeader-modalHeader-1Kf9RW { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } -.modal-footer, .EditHomeModalContent-footer-10Ix6N { + +.modal-footer, +.EditHomeModalContent-footer-10Ix6N { 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 { + +body>div.user-select-modal.modal.modal-transparent.fade.in>div>div.modal-content>div>div.modal-body { background: none; } -#pin-form > div { + +#pin-form>div { background: none; } + .modal-list { -background-color: rgba(0, 0, 0, 0.25); + background-color: rgba(0, 0, 0, 0.25); } + .match-result-list-item>.match-result .match-score-info { color: #eee; } + .fix-incorrect-match-modal .match-location { color: #eee; } -/*Modal icon color*/ + +/*Modal icon color*/ .edit-section-modal .wizard-blocks-group>.wizard-block { color: #ffffff; } @@ -126,151 +186,234 @@ background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25); border-color: #32323200; } + .well { background-color: rgba(0, 0, 0, 0.25); border: 1px solid transparent; } + .files ul li { color: #fff; } + .MetadataPosterCardOverlay-unplayedBadge-2hKHo5 { background-color: var(--accent-color); } + .MetadataPosterCardFace-face--dz_Dx:hover { box-shadow: 0 0 0 2px var(--accent-color); } + .PlayButton-playButton-3WX8X-:hover .PlayButton-playCircle-3Evfdw { border-color: var(--accent-color); background-color: var(--accent-color); } + .PageHeaderTabDropdown-isSelected-FK5pDv { border-color: var(--accent-color); } -.SelectedMenuItem-isSelected-178xe1, .SelectedMenuItem-isSelected-178xe1 .SelectedMenuItem-selectedIcon-20Yx1_ { + +.SelectedMenuItem-isSelected-178xe1, +.SelectedMenuItem-isSelected-178xe1 .SelectedMenuItem-selectedIcon-20Yx1_ { color: var(--accent-color); } -.Badge-primary-3suJx3,.alert-bar.notify { + +.Badge-primary-3suJx3, +.alert-bar.notify { background-color: var(--accent-color); } + .PrePlayCastCell-posterCardLinkContainer-27hxZ8:hover { box-shadow: 0 0 0 2px var(--accent-color); } + .SourceSidebarServerHeader-title-3zMGa0 { color: var(--accent-color); } + .SourceSidebarLink-isSelected-27-9-6 { box-shadow: inset 4px 0 0 0 var(--accent-color); } + .PosterCardOverlayProgress-progressBar-3k291O { background-color: var(--accent-color); } + .Spinner-spinner-Niere7 { border-color: var(--accent-color) transparent transparent var(--accent-color); } + .loading { border-color: var(--accent-color) transparent transparent var(--accent-color); } + .PlayPauseOverlay-playCircle-3ydPYX { border-color: var(--accent-color); background-color: var(--accent-color); } + .SeekBar-seekBarFill-1Lcu0w { background-color: var(--accent-color); } + .SeekBar-seekBarBuffer-3bUz95 { background-color: var(--accent-color); opacity: .2; } + .VolumeSlider-fill-3XkYyD { background-color: var(--accent-color); } + .IconButton-isActive-1_AJJ- { color: var(--accent-color); } + .IconButton-isActive-1_AJJ-:hover { color: var(--accent-color); opacity: .7 } + .MetadataPosterCardFace-isSelected-1XUgkl { box-shadow: 0 0 0 2px var(--accent-color); } + .SelectButton-isSelected-3mX245 .SelectButton-selectCircle-3tdvGt { border-color: var(--accent-color); background-color: var(--accent-color); color: #eee; } + .btn-gray.selected { color: var(--accent-color); } + a { color: var(--link-color); } + a:hover { color: #eee; } + .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); + -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); } + .media-poster-container.selected .media-poster:before { border-color: var(--accent-color) var(--accent-color) transparent transparent; } -.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); + +.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); } + .label-primary { background-color: var(--button-color); } -.label-primary[href]:focus, .label-primary[href]:hover { + +.label-primary[href]:focus, +.label-primary[href]:hover { background-color: var(--button-color-hover); background-color: var(--button-color-hover); } + .Link-isSelected-1XdDvu { color: var(--accent-color); } + .Link-link-2n0yJn:hover { color: #fff !important; } + .SessionTile-playProgressPercent-1_FcEg { background-color: var(--accent-color); } + .SessionTile-transcodeProgressPercent-K1k4ZQ { 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 { + +.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-jaUTXA { color: var(--accent-color); } + .ServerMenuItem-selectedIcon-dhK05- { color: var(--accent-color); } + .NavBarActivityMenuStatusItem-statusButtonIndicator-3D2d1i { color: var(--accent-color); } + .MetadataTitleProgress-unwatchedCircle-25KKnh { background-color: var(--accent-color); } + .MultiSelectPageHeader-multiSelectPageHeader-MIQA1B { box-shadow: 0 2px 0 0 var(--accent-color); } + .MultiSelectPageHeader-selectedTitle-1kn-xo { color: var(--accent-color); } + .PlexPassUpsell-icon-1r94uI { color: var(--accent-color); } -.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { + +.nav-pills>li.active>a, +.nav-pills>li.active>a:focus, +.nav-pills>li.active>a:hover { color: var(--accent-color); } + .edit-lock-addon.locked { background-color: var(--accent-color); border-color: var(--accent-color); } + .media-poster-container.selected .media-poster:after { color: #eee; +} + +.PosterCardLink-hoveredLink-AhlkMt { + box-shadow: 0 0 0 1px var(--accent-color), 0 0 4px rgba(0, 0, 0, .3) +} + +.MetadataPosterCard-legacyUnwatchedTag-3f03pS { + background-color: var(--accent-color); +} + +.MetadataPosterCardProgressBar-bar-3N2AjG { + background-color: var(--accent-color); + transition: transform .6s ease-in-out; +} + +.Button-primary-3z8akl { + background-color: var(--button-color); + color: #fff; +} + +.Button-primary-3z8akl:hover { + background-color: var(--button-color-hover); + color: #fff; +} + +.Spinner-spinner-1qRM4t { + border-color: var(--accent-color) transparent transparent var(--accent-color); } \ No newline at end of file