mirror of
https://github.com/Readarr/Readarr.git
synced 2026-04-18 21:34:28 -04:00
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:
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user