style: 💄 starr: consolidate starr darker themes

themepark-dev · May 17, 2022 · eb91fcc · eb91fcc
1 parent ceeb248
commit eb91fcc
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 436 deletions.
diff --git 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
@@ -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
@@ -1,3 +1,4 @@
+@import url("/css/defaults/servarr-darker-base.css");
 :root {
     --main-bg-color: #202020;
 
@@ -36,116 +37,19 @@
     --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);
     box-shadow: none;
     color: #e1e2e3;
 }
 
-[class*="MenuContent-scroller-"] {
-    box-shadow: none;
-}
-
 canvas {
     filter: none !important
 }
 
 [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);
-}
diff --git a/css/addons/radarr/radarr-darker/radarr-darker.css b/css/addons/radarr/radarr-darker/radarr-darker.css
@@ -1,22 +1,23 @@
+@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;
     --button-text: #eee;
     --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;
 }