fergalmoran/Readarr
1
0
Fork 0
mirror of https://github.com/fergalmoran/Readarr.git synced 2025-12-22 09:29:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed: Finetuned color-impaired mode styling in Calendar

Browse Source 
Co-Authored-By: taloth <taloth@users.noreply.github.com>
This commit is contained in:
Qstick
2019-08-04 21:25:19 -04:00
parent 5e3a0e2cd7
commit 413819ae28
2 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/Calendar/Events/CalendarEvent.css
View File

@@ -5,6 +5,10 @@
border-bottom: 1px solid $borderColor;
border-left: 4px solid $borderColor;
font-size: 12px;
&:global(.colorImpaired) {
border-left-width: 5px;
}
}
.info,
@@ -38,37 +42,38 @@
*/
.downloaded {
border-left-color: $successColor;
}
border-left-color: $successColor !important;
.partial {
border-left-color: $yellow;
&:global(.colorImpaired) {
border-left-color: color($successColor, saturation(+15%)) !important;
}
}
.downloading {
border-left-color: $purple;
border-left-color: $purple !important;
}
.unmonitored {
border-left-color: $gray;
border-left-color: $gray !important;
&:global(.colorImpaired) {
background: repeating-linear-gradient(45deg, transparent, transparent 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
}
}
.missing {
border-left-color: $dangerColor;
border-left-color: $dangerColor !important;
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, transparent, transparent 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
border-left-color: color($dangerColor saturation(+15%)) !important;
background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
}
}
.unreleased {
border-left-color: $blue;
border-left-color: $primaryColor !important;
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, transparent, transparent 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
}
}

3
frontend/src/Styles/Variables/colors.js
View File

@@ -63,7 +63,8 @@ module.exports = {
inputErrorBoxShadowColor: 'rgba(240, 80, 80, 0.6)',
inputWarningBorderColor: '#ffa500',
inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)',
colorImpairedGradient: '#fcfcfc',
colorImpairedGradient: '#ffffff',
colorImpairedGradientDark: '#f4f5f6',
//
// Buttons