github/lidarr
1
0
Fork 0
mirror of https://github.com/lidarr/lidarr.git synced 2025-07-14 00:53:57 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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-bottom: 1px solid $borderColor;
border-left: 4px solid $borderColor; border-left: 4px solid $borderColor;
font-size: 12px; font-size: 12px;
&:global(.colorImpaired) {
border-left-width: 5px;
}
} }
.info, .info,
@ -38,37 +42,38 @@
*/ */
.downloaded { .downloaded {
border-left-color: $successColor; border-left-color: $successColor !important;
}
.partial { &:global(.colorImpaired) {
border-left-color: $yellow; border-left-color: color($successColor, saturation(+15%)) !important;
}
} }
.downloading { .downloading {
border-left-color: $purple; border-left-color: $purple !important;
} }
.unmonitored { .unmonitored {
border-left-color: $gray; border-left-color: $gray !important;
&:global(.colorImpaired) { &: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 { .missing {
border-left-color: $dangerColor; border-left-color: $dangerColor !important;
&:global(.colorImpaired) { &: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 { .unreleased {
border-left-color: $blue; border-left-color: $primaryColor !important;
&:global(.colorImpaired) { &: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)', inputErrorBoxShadowColor: 'rgba(240, 80, 80, 0.6)',
inputWarningBorderColor: '#ffa500', inputWarningBorderColor: '#ffa500',
inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)', inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)',
colorImpairedGradient: '#fcfcfc', colorImpairedGradient: '#ffffff',
colorImpairedGradientDark: '#f4f5f6',
// //
// Buttons // Buttons