Merge pull request #379 from GilbN/develop

1.9.3

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-bg-color: #2a2a2a;
-    --modal-header-color: #252833;
+    --modal-header-color: #2a2a2a;
-    --modal-footer-color: #252833;
+    --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-active: #333333;
-    --side-menu-color: #3a3f51;
     --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 */

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-bg-color: #2a2a2a;
-    --modal-header-color: #353535;
+    --modal-header-color: #2a2a2a;
-    --modal-footer-color: #353535;
+    --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;
+    --header-color: #2a2a2a;
-    --side-menu-color: #353535;
+    --toolbar-background: #262626;
-}
+    --side-menu-color: #2a2a2a;
-
+    --side-menu-link-color: #00a65b;
-/* 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);
 }
 
 /* SEARCH DROP DOWN */

css/addons/prowlarr/prowlarr-darker/prowlarr-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: #454545;
+    --modal-bg-color: #2a2a2a;
-    --modal-header-color: #454545;
+    --modal-header-color: #2a2a2a;
-    --modal-footer-color: #454545;
+    --modal-footer-color: #2a2a2a;
 
-    --drop-down-menu-bg: #606060;
+    --drop-down-menu-bg: #333;
 
     --button-color: #5899eb;
     --button-color-hover: #4b91ea;
@@ -28,106 +29,27 @@
     --scroller-hover: #606060;
     --scroller: #707070;
     --border-color: #606060;
-    --label-color: #707070;
+    --label-color: #e66000;
     --label-info: #5d9cec;
-    --header-color: #e66000;
+    --header-color: #2a2a2a;
-    --side-menu-color: #595959;
+    --toolbar-background: #262626;
+    --side-menu-color: #2a2a2a;
     --side-menu-link-color: #e66000;
 }
 
-/* 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(--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: inset 0 1px 1px rgb(0 0 0 / 8%);
+    box-shadow: none;
     color: #e1e2e3;
 }
 
-/* BUTTONS */
+canvas {
+    filter: none !important
+}
+
+[class*="Stats-fullWidthChart-"], [class*="Stats-halfWidthChart-"] {
+    background: transparent !important;
+}

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-bg-color: #2a2a2a;
-    --modal-header-color: #595959;
+    --modal-header-color: #2a2a2a;
-    --modal-footer-color: #595959;
+    --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);
+    --accent-color-hover: rgba(255, 194, 48, 0.8);
-    --link-color: rgb(255, 194, 48);
+    --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;
+    --header-color: #2a2a2a;
-    --side-menu-color: #595959;
+    --toolbar-background: #262626;
-}
+    --side-menu-color: #2a2a2a;
-
+    --side-menu-link-color: #ffc230;
-/* 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);
 }
 
 /* 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;
 }

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-bg-color: #2a2a2a;
-    --modal-header-color: #353535;
+    --modal-header-color: #2a2a2a;
-    --modal-footer-color: #353535;
+    --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;
+    --arr-queue-color: #5d9cec;
-    --side-menu-active: #252525;
+    --side-menu-active: #333333;
     --scroller-hover: #606060;
     --scroller: #707070;
     --border-color: #606060;
     --label-color: #810020;
     --label-info: #5d9cec;
-    --header-color: #a41726;
+    --header-color: #2a2a2a;
-    --side-menu-color: #353535;
+    --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;
+    color: var(--text);
-    background: #4a4a4b;
+    background: var(--main-bg-color);
 }

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-bg-color: #2a2a2a;
-    --modal-header-color: #3a3f51;
+    --modal-header-color: #2a2a2a;
-    --modal-footer-color: #3a3f51;
+    --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;
+    --side-menu-active: #333333;
-    --scroller-hover: #656d8c;
+    --scroller-hover: #606060;
-    --scroller: #9ea4b9;
+    --scroller: #707070;
-    --border-color: #4f566f;
+    --border-color: #606060;
-    --label-color: #4f566f;
+    --label-color: #35c5f4;
     --label-info: #5d9cec;
-    --header-color: #2193b5;
+    --header-color: #2a2a2a;
-    --side-menu-color: #3a3f51;
+    --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);

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-"],

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);
+}