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%;
--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-30: hsl(var(--ngx-green), calc(var(--l) + 30%));
--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-18: hsl(var(--ngx-green), calc(var(--l) - 18%));
--ngx-bg-darker: var(--bs-gray-100);
--ngx-focus-alpha: 0.3;
}
svg.logo {
@ -54,12 +57,20 @@ svg.logo {
&:hover, &:focus, &.active, &:active {
background-color: var(--bs-primary) !important;
color: var(--bs-body-color) !important;
color: var(--bs-light) !important;
}
}
.btn-outline-secondary {
color: var(--bs-secondary);
&:hover, &:focus, &.active, &:active {
color: var(--bs-light);
}
}
.nav-item .sidebaricon {
color: var(--bs-secondary);
}
.btn:focus,
@ -69,7 +80,7 @@ svg.logo {
.form-control:focus,
.form-check-input: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 {
@ -123,19 +134,20 @@ textarea,
}
.page-link {
color: var(--bs-primary);
color: var(--bs-light);
background-color: var(--bs-body-bg);
border-color: var(--bs-border-color) !important;
&:hover, &:focus {
background-color: var(--bs-primary) !important;
color: var(--bs-body-color) !important;
color: var(--bs-light) !important;
}
}
.page-item.active .page-link {
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 {
@ -205,7 +217,7 @@ textarea,
color: var(--bs-body-color);
&:hover {
background-color: var(--bs-body-bg);
background-color: var(--ngx-bg-darker);
color: var(--bs-body-color);
}
@ -232,7 +244,7 @@ table.table {
}
.ngx-file-drop__drop-zone--over {
background-color: var(--ngx-primary-darken-15) !important;
background-color: var(--ngx-primary-faded) !important;
}
.alert-danger {
@ -247,14 +259,6 @@ table.table {
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-weekdays,
.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};
--ngx-bg-darker: #{$bg-dark-mode-accent};
--ngx-bg-alt: #{$bg-dark-mode-alt};
--ngx-focus-alpha: 0.7;
.navbar.bg-primary{
--bs-primary: hsl(var(--ngx-green),var(--l));
@ -59,8 +60,11 @@ $border-color-dark-mode: #47494f;
color: var(--bs-body-color) !important;
}
.btn-outline-secondary:hover {
.btn-outline-secondary {
&:hover, &:focus, &.active, &:active {
background-color: var(--ngx-bg-darker);
color: var(--bs-primary);
}
}
.card {
@ -133,6 +137,18 @@ $border-color-dark-mode: #47494f;
.modal .btn-close {
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 {