1
0
mirror of https://github.com/gilbN/theme.park.git synced 2024-09-11 11:22:24 +02:00

style: 💄 starr: consolidate starr darker themes

This commit is contained in:
GilbN 2022-05-17 15:01:56 +02:00
parent ceeb248173
commit eb91fcce6f
8 changed files with 167 additions and 436 deletions

View File

@ -1,11 +1,11 @@
:root { :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: #911f93;
--button-color-hover: #721873; --button-color-hover: #721873;
@ -24,15 +24,16 @@
/*Specials*/ /*Specials*/
--arr-queue-color: #6c757d; --arr-queue-color: #6c757d;
--side-menu-active: #252833; --side-menu-active: #333333;
--side-menu-color: #3a3f51;
--side-menu-link-color: #fff; --side-menu-link-color: #fff;
--scroller-hover: #606060; --scroller-hover: #606060;
--scroller: #707070; --scroller: #707070;
--border-color: #606060; --border-color: #606060;
--label-color: #911f93; --label-color: #911f93;
--label-info: #5d9cec; --label-info: #5d9cec;
--header-color: #911f93; --header-color: #2a2a2a;
--toolbar-background: #262626;
--side-menu-color: #2a2a2a;
} }
/* HEADER */ /* HEADER */

View File

@ -1,11 +1,12 @@
@import url("/css/defaults/servarr-darker-base.css");
:root { :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: #5899eb;
--button-color-hover: #4b91ea; --button-color-hover: #4b91ea;
@ -24,87 +25,16 @@
/*Specials*/ /*Specials*/
--arr-queue-color: #00a65b; --arr-queue-color: #00a65b;
--side-menu-active: #252525; --side-menu-active: #333333;
--scroller-hover: #606060; --scroller-hover: #606060;
--scroller: #707070; --scroller: #707070;
--border-color: #606060; --border-color: #606060;
--label-color: #1d563d; --label-color: #1d563d;
--label-info: #5d9cec; --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 */ /* SEARCH DROP DOWN */

View File

@ -1,3 +1,4 @@
@import url("/css/defaults/servarr-darker-base.css");
:root { :root {
--main-bg-color: #202020; --main-bg-color: #202020;
@ -36,95 +37,8 @@
--side-menu-link-color: #e66000; --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 */ /* SEARCH DROP DOWN */
[class*=IndexerSearchInput-containerOpen-] [class*=IndexerSearchInput-movieContainer-] { [class*=IndexerSearchInput-containerOpen-] [class*=IndexerSearchInput-movieContainer-] {
border: 1px solid var(--drop-down-menu-bg); border: 1px solid var(--drop-down-menu-bg);
background-color: var(--drop-down-menu-bg); background-color: var(--drop-down-menu-bg);
@ -132,10 +46,6 @@
color: #e1e2e3; color: #e1e2e3;
} }
[class*="MenuContent-scroller-"] {
box-shadow: none;
}
canvas { canvas {
filter: none !important filter: none !important
} }
@ -143,9 +53,3 @@ canvas {
[class*="Stats-fullWidthChart-"], [class*="Stats-halfWidthChart-"] { [class*="Stats-fullWidthChart-"], [class*="Stats-halfWidthChart-"] {
background: transparent !important; 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);
}

View File

@ -1,11 +1,12 @@
@import url("/css/defaults/servarr-darker-base.css");
:root { :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: #5899eb;
--button-color-hover: #4b91ea; --button-color-hover: #4b91ea;
@ -13,10 +14,10 @@
--button-text-hover: #fff; --button-text-hover: #fff;
--accent-color: 255, 194, 48; --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); --link-color-hover: rgb(255, 194, 48, .8);
--label-text-color: #eee; --label-text-color: #2f2f2f;
--text: #ccc; --text: #ccc;
--text-hover: #fff; --text-hover: #fff;
@ -28,83 +29,12 @@
--scroller-hover: #606060; --scroller-hover: #606060;
--scroller: #707070; --scroller: #707070;
--border-color: #606060; --border-color: #606060;
--label-color: #707070; --label-color: #ffc230;
--label-info: #5d9cec; --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 */ /* SEARCH DROP DOWN */
@ -120,5 +50,5 @@
[class*="MovieIndexPoster-controls-"] { [class*="MovieIndexPoster-controls-"] {
background-color: var(--label-color) !important; background-color: var(--label-color) !important;
color: #fff !important; color: var(--label-text-color) !important;
} }

View File

@ -1,11 +1,12 @@
@import url("/css/defaults/servarr-darker-base.css");
:root { :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: #5899eb;
--button-color-hover: #4b91ea; --button-color-hover: #4b91ea;
@ -23,104 +24,22 @@
--text-muted: #999; --text-muted: #999;
/*Specials*/ /*Specials*/
--arr-queue-color: #1d563d; --arr-queue-color: #5d9cec;
--side-menu-active: #252525; --side-menu-active: #333333;
--scroller-hover: #606060; --scroller-hover: #606060;
--scroller: #707070; --scroller: #707070;
--border-color: #606060; --border-color: #606060;
--label-color: #810020; --label-color: #810020;
--label-info: #5d9cec; --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; --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 */ /* AUTHOR PAGE */
[class*="AuthorDetailsHeader-headerContent-"], [class*="BookDetailsHeader-headerContent-"] { [class*="AuthorDetailsHeader-headerContent-"], [class*="BookDetailsHeader-headerContent-"] {
color: #fff; color: var(--text);
background: #4a4a4b; background: var(--main-bg-color);
} }

View File

@ -1,11 +1,12 @@
@import url("/css/defaults/servarr-darker-base.css");
:root { :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: #5899eb;
--button-color-hover: #3483e7; --button-color-hover: #3483e7;
@ -16,50 +17,25 @@
--accent-color-hover: rgb(33, 147, 181); --accent-color-hover: rgb(33, 147, 181);
--link-color: #35c5f4; --link-color: #35c5f4;
--link-color-hover: rgb(53, 197, 244, .8); --link-color-hover: rgb(53, 197, 244, .8);
--label-text-color: #4f566f; --label-text-color: #272a36;
--text: #ccc; --text: #ccc;
--text-hover: #fff; --text-hover: #fff;
--text-muted: #999; --text-muted: #bebebe;
/*Specials*/ /*Specials*/
--arr-queue-color: #35c5f4; --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; --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 */ /* SCROLLER */
[class*=ImportSeriesSelectSeries-results-]::-webkit-scrollbar-thumb:hover, [class*=ImportSeriesSelectSeries-results-]::-webkit-scrollbar-thumb:hover,
[class*=OverlayScroller-thumb-]:hover { [class*=OverlayScroller-thumb-]:hover {
@ -71,35 +47,6 @@
background-color: var(--scroller) !important; 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 */ /* SEARCH DROP DOWN */
[class*="SeriesSearchInput-containerOpen-"] [class*="SeriesSearchInput-seriesContainer-"] { [class*="SeriesSearchInput-containerOpen-"] [class*="SeriesSearchInput-seriesContainer-"] {
border: 1px solid var(--drop-down-menu-bg); border: 1px solid var(--drop-down-menu-bg);

View File

@ -322,7 +322,6 @@ a:hover {
[class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"],
[class*="Popover-title-"],
[class*="SeasonInfo-title-"], [class*="SeasonInfo-title-"],
[class*="Popover-body-"], [class*="Popover-body-"],
[class*="Tooltip-body-"], [class*="Tooltip-body-"],
@ -332,6 +331,11 @@ a:hover {
color: var(--text-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)) { /* @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) {
[class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"],
[class*="Popover-title-"], [class*="Popover-title-"],

View File

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