From eb91fcce6fd614c86df75e56ccccb34375181e6d Mon Sep 17 00:00:00 2001 From: GilbN Date: Tue, 17 May 2022 15:01:56 +0200 Subject: [PATCH] style: :lipstick: starr: consolidate starr darker themes --- .../bazarr/bazarr-darker/bazarr-darker.css | 17 +-- .../lidarr/lidarr-darker/lidarr-darker.css | 92 ++------------- .../prowlarr-darker/prowlarr-darker.css | 98 +--------------- .../radarr/radarr-darker/radarr-darker.css | 100 +++------------- .../readarr/readarr-darker/readarr-darker.css | 107 +++--------------- .../sonarr/sonarr-darker/sonarr-darker.css | 87 +++----------- css/defaults/servarr-base.css | 6 +- css/defaults/servarr-darker-base.css | 96 ++++++++++++++++ 8 files changed, 167 insertions(+), 436 deletions(-) create mode 100644 css/defaults/servarr-darker-base.css diff --git a/css/addons/bazarr/bazarr-darker/bazarr-darker.css b/css/addons/bazarr/bazarr-darker/bazarr-darker.css index 29ece53b..3422e0fc 100644 --- a/css/addons/bazarr/bazarr-darker/bazarr-darker.css +++ b/css/addons/bazarr/bazarr-darker/bazarr-darker.css @@ -1,11 +1,11 @@ :root { - --main-bg-color: #313544; + --main-bg-color: #202020; - --modal-bg-color: #252833; - --modal-header-color: #252833; - --modal-footer-color: #252833; + --modal-bg-color: #2a2a2a; + --modal-header-color: #2a2a2a; + --modal-footer-color: #2a2a2a; - --drop-down-menu-bg: #252833; + --drop-down-menu-bg: #333; --button-color: #911f93; --button-color-hover: #721873; @@ -24,15 +24,16 @@ /*Specials*/ --arr-queue-color: #6c757d; - --side-menu-active: #252833; - --side-menu-color: #3a3f51; + --side-menu-active: #333333; --side-menu-link-color: #fff; --scroller-hover: #606060; --scroller: #707070; --border-color: #606060; --label-color: #911f93; --label-info: #5d9cec; - --header-color: #911f93; + --header-color: #2a2a2a; + --toolbar-background: #262626; + --side-menu-color: #2a2a2a; } /* HEADER */ diff --git a/css/addons/lidarr/lidarr-darker/lidarr-darker.css b/css/addons/lidarr/lidarr-darker/lidarr-darker.css index fc479d22..d68dfdc7 100644 --- a/css/addons/lidarr/lidarr-darker/lidarr-darker.css +++ b/css/addons/lidarr/lidarr-darker/lidarr-darker.css @@ -1,11 +1,12 @@ +@import url("/css/defaults/servarr-darker-base.css"); :root { - --main-bg-color: #454545; + --main-bg-color: #202020; - --modal-bg-color: #353535; - --modal-header-color: #353535; - --modal-footer-color: #353535; + --modal-bg-color: #2a2a2a; + --modal-header-color: #2a2a2a; + --modal-footer-color: #2a2a2a; - --drop-down-menu-bg: #4d8069; + --drop-down-menu-bg: #333; --button-color: #5899eb; --button-color-hover: #4b91ea; @@ -24,87 +25,16 @@ /*Specials*/ --arr-queue-color: #00a65b; - --side-menu-active: #252525; + --side-menu-active: #333333; --scroller-hover: #606060; --scroller: #707070; --border-color: #606060; --label-color: #1d563d; --label-info: #5d9cec; - --header-color: #00a65b; - --side-menu-color: #353535; -} - -/* HEADER */ - -[class*="PageHeader-header-"] { - background-color: var(--header-color); - color: #fff; -} - -[class*="PageToolbar-toolbar-"] { - background-color: #1d563d; - color: #e1e2e3; -} - -/* SIDE MENU */ - -[class*="PageSidebar-sidebar-"] { - background-color: #353535; - color: #fff; -} - -[class*=PageSidebarItem-link-]:focus { - color: rgb(var(--accent-color)) !important; -} - -[class*=PageSidebarItem-isActiveLink-] { - color: var(--link-color) !important; -} - -[class*=PageSidebarItem-isActiveParentLink-] { - background-color: var(--side-menu-active); -} - -/* SCROLLER */ - -[class*=OverlayScroller-thumb-]:hover { - background-color: var(--scroller-hover) !important; -} - -[class*="OverlayScroller-thumb-"], -[class*=Scroller-scroller-]::-webkit-scrollbar-thumb { - background-color: var(--scroller) !important; -} - -/* MODALS */ - -[class*=ModalHeader-modalHeader-], -[class*=FieldSet-legend-] { - border-bottom: 1px solid var(--border-color); -} - -[class*=ModalFooter-modalFooter-] { - border-top: 1px solid var(--border-color); -} - -/* LABLES */ - -[class*="Label-default-"] { - border-color: var(--label-color); - background-color: var(--label-color); - color: white; -} - -[class*="Label-info-"]:not([class*="PageSidebarItem-status-"] [class*="Label-info-"]) { - border-color: var(--label-info); - background-color: var(--label-info); - color: #fff; -} - -/* SETTINGS */ - -[class*=Settings-link-] { - border-bottom: 1px solid var(--border-color); + --header-color: #2a2a2a; + --toolbar-background: #262626; + --side-menu-color: #2a2a2a; + --side-menu-link-color: #00a65b; } /* SEARCH DROP DOWN */ diff --git a/css/addons/prowlarr/prowlarr-darker/prowlarr-darker.css b/css/addons/prowlarr/prowlarr-darker/prowlarr-darker.css index a58ef323..75c317fe 100644 --- a/css/addons/prowlarr/prowlarr-darker/prowlarr-darker.css +++ b/css/addons/prowlarr/prowlarr-darker/prowlarr-darker.css @@ -1,3 +1,4 @@ +@import url("/css/defaults/servarr-darker-base.css"); :root { --main-bg-color: #202020; @@ -36,95 +37,8 @@ --side-menu-link-color: #e66000; } -/* HEADER */ - -[class*="PageHeader-header-"] { - background-color: var(--header-color); - color: #fff; - box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%); -} - -[class*="PageToolbar-toolbar-"] { - background-color: var(--toolbar-background); - color: var(--text); -} - -/* SIDE MENU */ - -[class*="PageSidebar-sidebar-"] { - background-color: var(--side-menu-color); - color: #fff; -} - -[class*=PageSidebarItem-link-]:focus { - color: rgb(var(--accent-color)) !important; -} - -[class*=PageSidebarItem-isActiveLink-] { - color: var(--side-menu-link-color) !important; -} - -[class*=PageSidebarItem-isActiveParentLink-] { - background-color: var(--side-menu-active); -} - -/* SCROLLER */ - -[class*=ImportSeriesSelectSeries-results-]::-webkit-scrollbar-thumb:hover, -[class*=OverlayScroller-thumb-]:hover { - background-color: var(--scroller-hover) !important; -} - -[class*="OverlayScroller-thumb-"], -[class*=Scroller-scroller-]::-webkit-scrollbar-thumb { - background-color: var(--scroller) !important; -} - -/* MODALS */ - -[class*=ModalHeader-modalHeader-], -[class*=FieldSet-legend-] { - border-bottom: 1px solid var(--border-color); -} - -[class*=ModalFooter-modalFooter-] { - border-top: 1px solid var(--border-color); -} - -/* LABLES */ - -[class*="Label-default-"] { - border-color: var(--label-color); - background-color: var(--label-color); - color: white; -} - -[class*="Label-info-"]:not([class*="PageSidebarItem-status-"] [class*="Label-info-"]) { - border-color: var(--label-info); - background-color: var(--label-info); - color: #fff; -} - -[class*="Label-disabled-"][class*="Label-outline-"] { - color: #000; -} - -[class*="Label-outline-"] { - background-color: #989898; -} - -[class*="Label-success-"] { - color: #000; -} - -/* SETTINGS */ - -[class*=Settings-link-] { - border-bottom: 1px solid var(--border-color); -} /* SEARCH DROP DOWN */ - [class*=IndexerSearchInput-containerOpen-] [class*=IndexerSearchInput-movieContainer-] { border: 1px solid var(--drop-down-menu-bg); background-color: var(--drop-down-menu-bg); @@ -132,10 +46,6 @@ color: #e1e2e3; } -[class*="MenuContent-scroller-"] { - box-shadow: none; -} - canvas { filter: none !important } @@ -143,9 +53,3 @@ canvas { [class*="Stats-fullWidthChart-"], [class*="Stats-halfWidthChart-"] { background: transparent !important; } - -[class*="Card-card-"], [class*="QualityProfiles-addQualityProfile-"] { - background: var(--transparency-light-10); - box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.5); - color: var(--text); -} \ No newline at end of file diff --git a/css/addons/radarr/radarr-darker/radarr-darker.css b/css/addons/radarr/radarr-darker/radarr-darker.css index 31743298..29e6bb7e 100644 --- a/css/addons/radarr/radarr-darker/radarr-darker.css +++ b/css/addons/radarr/radarr-darker/radarr-darker.css @@ -1,11 +1,12 @@ +@import url("/css/defaults/servarr-darker-base.css"); :root { - --main-bg-color: #454545; + --main-bg-color: #202020; - --modal-bg-color: #595959; - --modal-header-color: #595959; - --modal-footer-color: #595959; + --modal-bg-color: #2a2a2a; + --modal-header-color: #2a2a2a; + --modal-footer-color: #2a2a2a; - --drop-down-menu-bg: #606060; + --drop-down-menu-bg: #333; --button-color: #5899eb; --button-color-hover: #4b91ea; @@ -13,10 +14,10 @@ --button-text-hover: #fff; --accent-color: 255, 194, 48; - --accent-color-hover: rgb(255, 194, 48, .8); - --link-color: rgb(255, 194, 48); + --accent-color-hover: rgba(255, 194, 48, 0.8); + --link-color: #ffc230; --link-color-hover: rgb(255, 194, 48, .8); - --label-text-color: #eee; + --label-text-color: #2f2f2f; --text: #ccc; --text-hover: #fff; @@ -28,83 +29,12 @@ --scroller-hover: #606060; --scroller: #707070; --border-color: #606060; - --label-color: #707070; + --label-color: #ffc230; --label-info: #5d9cec; - --header-color: #464b51; - --side-menu-color: #595959; -} - -/* HEADER */ - -[class*="PageHeader-header-"] { - background-color: var(--header-color); - color: #fff; -} - -[class*="PageToolbar-toolbar-"] { - background-color: #707070; - color: var(--text); -} - -/* SIDE MENU */ - -[class*="PageSidebar-sidebar-"] { - background-color: var(--side-menu-color); - color: #fff; -} - -[class*=PageSidebarItem-link-]:focus { - color: rgb(var(--accent-color)) !important; -} - -[class*=PageSidebarItem-isActiveLink-] { - color: var(--link-color) !important; -} - -[class*=PageSidebarItem-isActiveParentLink-] { - background-color: var(--side-menu-active); -} - -/* SCROLLER */ -[class*=ImportSeriesSelectSeries-results-]::-webkit-scrollbar-thumb:hover, -[class*=OverlayScroller-thumb-]:hover { - background-color: var(--scroller-hover) !important; -} - -[class*="OverlayScroller-thumb-"], -[class*=Scroller-scroller-]::-webkit-scrollbar-thumb { - background-color: var(--scroller) !important; -} - -/* MODALS */ - -[class*=ModalHeader-modalHeader-], -[class*=FieldSet-legend-] { - border-bottom: 1px solid var(--border-color); -} - -[class*=ModalFooter-modalFooter-] { - border-top: 1px solid var(--border-color); -} - -/* LABLES */ - -[class*="Label-default-"] { - border-color: var(--label-color); - background-color: var(--label-color); - color: white; -} - -[class*="Label-info-"]:not([class*="PageSidebarItem-status-"] [class*="Label-info-"]) { - border-color: var(--label-info); - background-color: var(--label-info); - color: #fff; -} - -/* SETTINGS */ - -[class*=Settings-link-] { - border-bottom: 1px solid var(--border-color); + --header-color: #2a2a2a; + --toolbar-background: #262626; + --side-menu-color: #2a2a2a; + --side-menu-link-color: #ffc230; } /* SEARCH DROP DOWN */ @@ -120,5 +50,5 @@ [class*="MovieIndexPoster-controls-"] { background-color: var(--label-color) !important; - color: #fff !important; + color: var(--label-text-color) !important; } \ No newline at end of file diff --git a/css/addons/readarr/readarr-darker/readarr-darker.css b/css/addons/readarr/readarr-darker/readarr-darker.css index 415a258c..6800b40d 100644 --- a/css/addons/readarr/readarr-darker/readarr-darker.css +++ b/css/addons/readarr/readarr-darker/readarr-darker.css @@ -1,11 +1,12 @@ +@import url("/css/defaults/servarr-darker-base.css"); :root { - --main-bg-color: #4a4a4b; + --main-bg-color: #202020; - --modal-bg-color: #353535; - --modal-header-color: #353535; - --modal-footer-color: #353535; + --modal-bg-color: #2a2a2a; + --modal-header-color: #2a2a2a; + --modal-footer-color: #2a2a2a; - --drop-down-menu-bg: #66001a; + --drop-down-menu-bg: #333; --button-color: #5899eb; --button-color-hover: #4b91ea; @@ -23,104 +24,22 @@ --text-muted: #999; /*Specials*/ - --arr-queue-color: #1d563d; - --side-menu-active: #252525; + --arr-queue-color: #5d9cec; + --side-menu-active: #333333; --scroller-hover: #606060; --scroller: #707070; --border-color: #606060; --label-color: #810020; --label-info: #5d9cec; - --header-color: #a41726; - --side-menu-color: #353535; + --header-color: #2a2a2a; + --toolbar-background: #262626; + --side-menu-color: #2a2a2a; --side-menu-link-color: #ca302d; } -/* HEADER */ - -[class*="PageHeader-header-"] { - background-color: var(--header-color); - color: #fff; -} - -[class*="PageToolbar-toolbar-"] { - background-color: #810020; - color: #e1e2e3; -} - -/* SIDE MENU */ - -[class*="PageSidebar-sidebar-"] { - background-color: #353535; - color: #fff; -} - -[class*=PageSidebarItem-link-]:focus { - color: rgb(var(--accent-color)) !important; -} - -[class*=PageSidebarItem-isActiveLink-] { - color: var(--side-menu-link-color) !important; -} - -[class*=PageSidebarItem-isActiveParentLink-] { - background-color: var(--side-menu-active); -} - -/* SCROLLER */ -[class*=ImportSeriesSelectSeries-results-]::-webkit-scrollbar-thumb:hover, -[class*=OverlayScroller-thumb-]:hover { - background-color: var(--scroller-hover) !important; -} - -[class*="OverlayScroller-thumb-"], -[class*=Scroller-scroller-]::-webkit-scrollbar-thumb { - background-color: var(--scroller) !important; -} - -/* MODALS */ -[class*=ModalHeader-modalHeader-], -[class*=FieldSet-legend-] { - border-bottom: 1px solid var(--border-color); -} - -[class*=ModalFooter-modalFooter-] { - border-top: 1px solid var(--border-color); -} - -/* LABLES */ -[class*="Label-default-"] { - border-color: var(--label-color); - background-color: var(--label-color); - color: white; -} - -[class*="Label-info-"]:not([class*="PageSidebarItem-status-"] [class*="Label-info-"]) { - border-color: var(--label-info); - background-color: var(--label-info); - color: #fff; -} -.Label-default-xecWd { - border-color: #810020; - background-color: #810020; -} - -/* SETTINGS */ - -[class*=Settings-link-] { - border-bottom: 1px solid var(--border-color); -} - -/* SEARCH DROP DOWN */ -[class*="MovieSearchInput-containerOpen-"] [class*="MovieSearchInput-movieContainer-"] { - border: 1px solid var(--drop-down-menu-bg); - background-color: var(--drop-down-menu-bg); - box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); - color: #e1e2e3; -} - /* AUTHOR PAGE */ [class*="AuthorDetailsHeader-headerContent-"], [class*="BookDetailsHeader-headerContent-"] { - color: #fff; - background: #4a4a4b; + color: var(--text); + background: var(--main-bg-color); } \ No newline at end of file diff --git a/css/addons/sonarr/sonarr-darker/sonarr-darker.css b/css/addons/sonarr/sonarr-darker/sonarr-darker.css index b1eb1ff0..7c3c2ddc 100644 --- a/css/addons/sonarr/sonarr-darker/sonarr-darker.css +++ b/css/addons/sonarr/sonarr-darker/sonarr-darker.css @@ -1,11 +1,12 @@ +@import url("/css/defaults/servarr-darker-base.css"); :root { - --main-bg-color: #4f566f; + --main-bg-color: #202020; - --modal-bg-color: #3a3f51; - --modal-header-color: #3a3f51; - --modal-footer-color: #3a3f51; + --modal-bg-color: #2a2a2a; + --modal-header-color: #2a2a2a; + --modal-footer-color: #2a2a2a; - --drop-down-menu-bg: #3a3f51; + --drop-down-menu-bg: #333; --button-color: #5899eb; --button-color-hover: #3483e7; @@ -16,50 +17,25 @@ --accent-color-hover: rgb(33, 147, 181); --link-color: #35c5f4; --link-color-hover: rgb(53, 197, 244, .8); - --label-text-color: #4f566f; + --label-text-color: #272a36; --text: #ccc; --text-hover: #fff; - --text-muted: #999; + --text-muted: #bebebe; /*Specials*/ --arr-queue-color: #35c5f4; - --side-menu-active: #252833; - --scroller-hover: #656d8c; - --scroller: #9ea4b9; - --border-color: #4f566f; - --label-color: #4f566f; + --side-menu-active: #333333; + --scroller-hover: #606060; + --scroller: #707070; + --border-color: #606060; + --label-color: #35c5f4; --label-info: #5d9cec; - --header-color: #2193b5; - --side-menu-color: #3a3f51; + --header-color: #2a2a2a; + --toolbar-background: #262626; + --side-menu-color: #2a2a2a; + --side-menu-link-color: #35c5f4; } - -/* HEADER */ - -[class*="PageHeader-header-"] { - background-color: var(--header-color); - color: #fff; -} - -/* SIDE MENU */ - -[class*="PageSidebar-sidebar-"] { - background-color: var(--side-menu-color); - color: #fff; -} - -[class*=PageSidebarItem-link-]:focus { - color: rgb(var(--accent-color)) !important; -} - -[class*=PageSidebarItem-isActiveLink-] { - color: var(--link-color) !important; -} - -[class*=PageSidebarItem-isActiveParentLink-] { - background-color: var(--side-menu-active); -} - /* SCROLLER */ [class*=ImportSeriesSelectSeries-results-]::-webkit-scrollbar-thumb:hover, [class*=OverlayScroller-thumb-]:hover { @@ -71,35 +47,6 @@ background-color: var(--scroller) !important; } -/* MODALS */ -[class*=ModalHeader-modalHeader-], -[class*=FieldSet-legend-] { - border-bottom: 1px solid var(--border-color); -} - -[class*=ModalFooter-modalFooter-] { - border-top: 1px solid var(--border-color); -} - -/* LABLES */ -[class*=Label-default-] { - border-color: var(--label-color); - background-color: var(--label-color); - color: white; -} - -[class*="Label-info-"]:not([class*="PageSidebarItem-status-"] [class*="Label-info-"]) { - border-color: var(--label-info); - background-color: var(--label-info); - color: white; -} - -/* SETTINGS */ - -[class*=Settings-link-] { - border-bottom: 1px solid var(--border-color); -} - /* SEARCH DROP DOWN */ [class*="SeriesSearchInput-containerOpen-"] [class*="SeriesSearchInput-seriesContainer-"] { border: 1px solid var(--drop-down-menu-bg); diff --git a/css/defaults/servarr-base.css b/css/defaults/servarr-base.css index 1ca1accc..1cafce54 100644 --- a/css/defaults/servarr-base.css +++ b/css/defaults/servarr-base.css @@ -322,7 +322,6 @@ a:hover { [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], -[class*="Popover-title-"], [class*="SeasonInfo-title-"], [class*="Popover-body-"], [class*="Tooltip-body-"], @@ -332,6 +331,11 @@ a:hover { color: var(--text-hover); } +[class*="Popover-title-"] { + background-color: rgba(0, 0, 0, 0.2); + border-bottom: rgba(255, 255, 255, 0.2) 1px solid; +} + /* @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], [class*="Popover-title-"], diff --git a/css/defaults/servarr-darker-base.css b/css/defaults/servarr-darker-base.css new file mode 100644 index 00000000..867417fa --- /dev/null +++ b/css/defaults/servarr-darker-base.css @@ -0,0 +1,96 @@ + +/* HEADER */ + +[class*="PageHeader-header-"] { + background-color: var(--header-color); + color: #fff; + box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%); +} + +[class*="PageToolbar-toolbar-"] { + background-color: var(--toolbar-background); + color: var(--text); +} + +/* SIDE MENU */ + +[class*="PageSidebar-sidebar-"] { + background-color: var(--side-menu-color); + color: #fff; +} + +[class*=PageSidebarItem-link-]:focus { + color: rgb(var(--accent-color)) !important; +} + +[class*=PageSidebarItem-isActiveLink-] { + color: var(--side-menu-link-color) !important; +} + +[class*=PageSidebarItem-isActiveParentLink-] { + background-color: var(--side-menu-active); +} + +/* SCROLLER */ + +[class*=OverlayScroller-thumb-]:hover { + background-color: var(--scroller-hover) !important; +} + +[class*="OverlayScroller-thumb-"], +[class*=Scroller-scroller-]::-webkit-scrollbar-thumb { + background-color: var(--scroller) !important; +} + +/* MODALS */ + +[class*=ModalHeader-modalHeader-], +[class*=FieldSet-legend-] { + border-bottom: 1px solid var(--border-color); +} + +[class*=ModalFooter-modalFooter-] { + border-top: 1px solid var(--border-color); +} + +/* LABLES */ + +[class*="Label-default-"] { + border-color: var(--label-color); + background-color: var(--label-color); + color: var(--label-text-color); +} + +[class*="Label-info-"]:not([class*="PageSidebarItem-status-"] [class*="Label-info-"]) { + border-color: var(--label-info); + background-color: var(--label-info); + color: #fff; +} + +[class*="Label-disabled-"][class*="Label-outline-"] { + color: #000; +} + +[class*="Label-outline-"] { + background-color: #989898; +} + +[class*="Label-success-"] { + color: #000; +} + +/* SETTINGS */ + +[class*=Settings-link-] { + border-bottom: 1px solid var(--border-color); +} + +[class*="MenuContent-scroller-"] { + box-shadow: none; +} + +[class*="Card-card-"], [class*="QualityProfiles-addQualityProfile-"] { + background: var(--transparency-light-10); + box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.5); + color: var(--text); +} \ No newline at end of file