New: Darkmode

* New: Native Theme Engine

Co-Authored-By: Zak Saunders <thezak48@users.noreply.github.com>
(cherry picked from commit 2291f3e00eb2ff9268a0b2f49da8dde82ee13c04)

* Update CSS for themes

* Fixup CSS values

* Fixup remove duped Color-Impaired setting

* Fixup Link Colors

Co-Authored-By: Qstick <qstick@gmail.com>
This commit is contained in:
Zak Saunders
2022-10-18 00:51:55 +01:00
committed by Qstick
parent 91b8565629
commit 6e38df366f
146 changed files with 923 additions and 481 deletions
+1 -1
View File
@@ -2,7 +2,7 @@
composes: link from '~Components/Link/Link.css';
&:hover {
color: $linkHoverColor;
color: var(--linkHoverColor);
text-decoration: underline;
}
}
@@ -8,5 +8,5 @@
.deleteFilesMessage {
margin-top: 20px;
color: $dangerColor;
color: var(--dangerColor);
}
+3 -3
View File
@@ -9,7 +9,7 @@
.tabList {
margin: 0;
padding: 0;
border-bottom: 1px solid $lightGray;
border-bottom: 1px solid var(--lightGray);
}
.tab {
@@ -24,7 +24,7 @@
}
.selectedTab {
border-bottom: 4px solid $linkColor;
border-bottom: 4px solid var(--linkColor);
}
.tabContent {
@@ -54,7 +54,7 @@
white-space: nowrap;
&:hover {
color: $iconButtonHoverLightColor;
color: var(--iconButtonHoverLightColor);
}
}
@@ -16,7 +16,7 @@
position: absolute;
width: 100%;
height: 100%;
background: $black;
background: var(--black);
opacity: 0.7;
}
@@ -25,7 +25,7 @@
padding: 30px;
width: 100%;
height: 100%;
color: $white;
color: var(--white);
}
.cover {
@@ -69,7 +69,7 @@
width: 40px;
&:hover {
color: $iconButtonHoverLightColor;
color: var(--iconButtonHoverLightColor);
}
}
@@ -5,5 +5,5 @@
.deleteFilesMessage {
margin-top: 20px;
color: $dangerColor;
color: var(--dangerColor);
}
+6 -6
View File
@@ -21,32 +21,32 @@
.continuing {
composes: legendItemColor;
background-color: $primaryColor;
background-color: var(--primaryColor);
}
.ended {
composes: legendItemColor;
background-color: $successColor;
background-color: var(--successColor);
}
.missingMonitored {
composes: legendItemColor;
background-color: $dangerColor;
background-color: var(--dangerColor);
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px);
}
}
.missingUnmonitored {
composes: legendItemColor;
background-color: $warningColor;
background-color: var(--warningColor);
&:global(.colorImpaired) {
background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px);
}
}
@@ -3,7 +3,7 @@ $hoverScale: 1.05;
.container {
&:hover {
.content {
background-color: $tableRowHoverBackgroundColor;
background-color: var(--tableRowHoverBackgroundColor);
}
}
}
@@ -35,10 +35,10 @@ $hoverScale: 1.05;
composes: link from '~Components/Link/Link.css';
display: block;
color: $defaultColor;
color: var(--defaultColor);
&:hover {
color: $defaultColor;
color: var(--defaultColor);
text-decoration: none;
}
}
@@ -52,8 +52,8 @@ $hoverScale: 1.05;
height: 0;
border-width: 0 25px 25px 0;
border-style: solid;
border-color: transparent $dangerColor transparent transparent;
color: $white;
border-color: transparent var(--dangerColor) transparent transparent;
color: var(--white);
}
.info {
@@ -5,7 +5,7 @@ $hoverScale: 1.05;
&:hover {
z-index: 2;
box-shadow: 0 0 12px $black;
box-shadow: 0 0 12px var(--black);
transition: all 200ms ease-in;
.controls {
@@ -32,7 +32,7 @@ $hoverScale: 1.05;
position: relative;
display: block;
height: 70px;
background-color: $defaultColor;
background-color: var(--cardBackgroundColor);
}
.overlayTitle {
@@ -45,7 +45,7 @@ $hoverScale: 1.05;
padding: 5px;
width: 100%;
height: 100%;
color: $offWhite;
color: var(--cardBackgroundColor);
text-align: center;
font-size: 20px;
}
@@ -59,8 +59,8 @@ $hoverScale: 1.05;
.title {
@add-mixin truncate;
background-color: $defaultColor;
color: $white;
background-color: var(--cardBackgroundColor);
color: var(--textColor);
text-align: center;
font-size: $smallFontSize;
}
@@ -74,8 +74,8 @@ $hoverScale: 1.05;
height: 0;
border-width: 0 25px 25px 0;
border-style: solid;
border-color: transparent $dangerColor transparent transparent;
color: $white;
border-color: transparent var(--dangerColor) transparent transparent;
color: var(--textColor);
}
.editorSelect {
@@ -91,8 +91,8 @@ $hoverScale: 1.05;
left: 10px;
z-index: 3;
border-radius: 4px;
background-color: $themeLightColor;
color: $white;
background-color: var(--readarrRed);
color: var(--white);
font-size: $smallFontSize;
opacity: 0;
transition: opacity 0;
@@ -3,7 +3,7 @@
border-radius: 0;
background-color: #5b5b5b;
color: $white;
color: var(--white);
transition: width 200ms ease;
}
@@ -29,7 +29,7 @@
position: relative;
display: block;
height: 70px;
background-color: $defaultColor;
background-color: var(--defaultColor);
}
.bannerImage {
@@ -47,7 +47,7 @@
padding: 5px;
width: 100%;
height: 100%;
color: $offWhite;
color: var(--offWhite);
text-align: center;
font-size: 20px;
}