paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-04-02 13:45:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix some light mode stuff due to specificity

Browse Source
This commit is contained in:
Michael Shamoon 2022-03-08 16:28:58 -08:00
parent 76115d6a81
commit db98eed392
2 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src-ui/src/theme.scss
View File

@ -4,12 +4,15 @@
--l: 21%; --l: 21%;
--bs-primary: hsl(var(--ngx-green), var(--l)); --bs-primary: hsl(var(--ngx-green), var(--l));
--ngx-primary-faded: #d1ddd2; --bs-border-color: var(--bs-gray-400);
--ngx-primary-faded: hsl(var(--ngx-green), calc(var(--l) + 72%));
--ngx-primary-lighten-10: hsl(var(--ngx-green), calc(var(--l) + 10%)); --ngx-primary-lighten-10: hsl(var(--ngx-green), calc(var(--l) + 10%));
--ngx-primary-lighten-30: hsl(var(--ngx-green), calc(var(--l) + 30%)); --ngx-primary-lighten-30: hsl(var(--ngx-green), calc(var(--l) + 30%));
--ngx-primary-darken-10: hsl(var(--ngx-green), calc(var(--l) - 10%)); --ngx-primary-darken-10: hsl(var(--ngx-green), calc(var(--l) - 10%));
--ngx-primary-darken-15: hsl(var(--ngx-green), calc(var(--l) - 15%)); --ngx-primary-darken-15: hsl(var(--ngx-green), calc(var(--l) - 15%));
--ngx-primary-darken-18: hsl(var(--ngx-green), calc(var(--l) - 18%)); --ngx-primary-darken-18: hsl(var(--ngx-green), calc(var(--l) - 18%));
--ngx-bg-darker: var(--bs-gray-100);
--ngx-focus-alpha: 0.3;
} }
svg.logo { svg.logo {
@ -54,12 +57,20 @@ svg.logo {
&:hover, &:focus, &.active, &:active { &:hover, &:focus, &.active, &:active {
background-color: var(--bs-primary) !important; background-color: var(--bs-primary) !important;
color: var(--bs-body-color) !important; color: var(--bs-light) !important;
} }
} }
.btn-outline-secondary { .btn-outline-secondary {
color: var(--bs-secondary); color: var(--bs-secondary);
&:hover, &:focus, &.active, &:active {
color: var(--bs-light);
}
}
.nav-item .sidebaricon {
color: var(--bs-secondary);
} }
.btn:focus, .btn:focus,
@ -69,7 +80,7 @@ svg.logo {
.form-control:focus, .form-control:focus,
.form-check-input:focus, .form-check-input:focus,
.form-check-radio:focus { .form-check-radio:focus {
box-shadow: 0 0 0 0.25rem hsla(var(--ngx-green), var(--l), 0.7); box-shadow: 0 0 0 0.25rem hsla(var(--ngx-green), var(--l), var(--ngx-focus-alpha));
} }
.nav-link:focus-visible, .nav-item a:focus-visible { .nav-link:focus-visible, .nav-item a:focus-visible {
@ -123,19 +134,20 @@ textarea,
} }
.page-link { .page-link {
color: var(--bs-primary); color: var(--bs-light);
background-color: var(--bs-body-bg); background-color: var(--bs-body-bg);
border-color: var(--bs-border-color) !important; border-color: var(--bs-border-color) !important;
&:hover, &:focus { &:hover, &:focus {
background-color: var(--bs-primary) !important; background-color: var(--bs-primary) !important;
color: var(--bs-body-color) !important; color: var(--bs-light) !important;
} }
} }
.page-item.active .page-link { .page-item.active .page-link {
background-color: var(--bs-primary); background-color: var(--bs-primary);
color: var(--bs-body-color); border-color: var(--bs-primary) !important;
color: var(--bs-light);
} }
.page-item.disabled .page-link { .page-item.disabled .page-link {
@ -205,7 +217,7 @@ textarea,
color: var(--bs-body-color); color: var(--bs-body-color);
&:hover { &:hover {
background-color: var(--bs-body-bg); background-color: var(--ngx-bg-darker);
color: var(--bs-body-color); color: var(--bs-body-color);
} }
@ -232,7 +244,7 @@ table.table {
} }
.ngx-file-drop__drop-zone--over { .ngx-file-drop__drop-zone--over {
background-color: var(--ngx-primary-darken-15) !important; background-color: var(--ngx-primary-faded) !important;
} }
.alert-danger { .alert-danger {
@ -247,14 +259,6 @@ table.table {
color: var(--bs-body-color); color: var(--bs-body-color);
} }
.toast {
background-color: hsla(var(--ngx-green), calc(var(--l) - 18%), 0.9);
}
.toast-header {
background-color: hsla(var(--ngx-green), calc(var(--l) - 10%), 0.9);
}
.ngb-dp-header, .ngb-dp-header,
.ngb-dp-weekdays, .ngb-dp-weekdays,
.ngb-dp-month { .ngb-dp-month {

18
src-ui/src/theme_dark.scss
View File

@ -29,6 +29,7 @@ $border-color-dark-mode: #47494f;
--bs-border-color: #{$border-color-dark-mode}; --bs-border-color: #{$border-color-dark-mode};
--ngx-bg-darker: #{$bg-dark-mode-accent}; --ngx-bg-darker: #{$bg-dark-mode-accent};
--ngx-bg-alt: #{$bg-dark-mode-alt}; --ngx-bg-alt: #{$bg-dark-mode-alt};
--ngx-focus-alpha: 0.7;
.navbar.bg-primary{ .navbar.bg-primary{
--bs-primary: hsl(var(--ngx-green),var(--l)); --bs-primary: hsl(var(--ngx-green),var(--l));
@ -59,8 +60,11 @@ $border-color-dark-mode: #47494f;
color: var(--bs-body-color) !important; color: var(--bs-body-color) !important;
} }
.btn-outline-secondary:hover { .btn-outline-secondary {
&:hover, &:focus, &.active, &:active {
background-color: var(--ngx-bg-darker); background-color: var(--ngx-bg-darker);
color: var(--bs-primary);
}
} }
.card { .card {
@ -133,6 +137,18 @@ $border-color-dark-mode: #47494f;
.modal .btn-close { .modal .btn-close {
filter: invert(1) grayscale(100%) brightness(200%); filter: invert(1) grayscale(100%) brightness(200%);
} }
.ngx-file-drop__drop-zone--over {
background-color: var(--ngx-primary-darken-15) !important;
}
.toast {
background-color: hsla(var(--ngx-green), calc(var(--l) - 18%), 0.9);
}
.toast-header {
background-color: hsla(var(--ngx-green), calc(var(--l) - 10%), 0.9);
}
} }
body.color-scheme-dark { body.color-scheme-dark {