mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2025-04-02 13:45:10 -05:00
fix some css specificity issues, unused vars
This commit is contained in:
parent
7b7534c952
commit
3a8cc31f1b
@ -152,25 +152,25 @@ export class SettingsService {
|
|||||||
this.renderer.removeClass(this.document.body, 'primary-dark')
|
this.renderer.removeClass(this.document.body, 'primary-dark')
|
||||||
}
|
}
|
||||||
this.renderer.setStyle(
|
this.renderer.setStyle(
|
||||||
document.documentElement,
|
document.body,
|
||||||
'--pngx-primary',
|
'--pngx-primary',
|
||||||
`${+hsl.h * 360},${hsl.s * 100}%`,
|
`${+hsl.h * 360},${hsl.s * 100}%`,
|
||||||
RendererStyleFlags2.DashCase
|
RendererStyleFlags2.DashCase
|
||||||
)
|
)
|
||||||
this.renderer.setStyle(
|
this.renderer.setStyle(
|
||||||
document.documentElement,
|
document.body,
|
||||||
'--pngx-primary-lightness',
|
'--pngx-primary-lightness',
|
||||||
`${hsl.l * 100}%`,
|
`${hsl.l * 100}%`,
|
||||||
RendererStyleFlags2.DashCase
|
RendererStyleFlags2.DashCase
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
this.renderer.removeStyle(
|
this.renderer.removeStyle(
|
||||||
document.documentElement,
|
document.body,
|
||||||
'--pngx-primary',
|
'--pngx-primary',
|
||||||
RendererStyleFlags2.DashCase
|
RendererStyleFlags2.DashCase
|
||||||
)
|
)
|
||||||
this.renderer.removeStyle(
|
this.renderer.removeStyle(
|
||||||
document.documentElement,
|
document.body,
|
||||||
'--pngx-primary-lightness',
|
'--pngx-primary-lightness',
|
||||||
RendererStyleFlags2.DashCase
|
RendererStyleFlags2.DashCase
|
||||||
)
|
)
|
||||||
|
@ -73,14 +73,14 @@ svg.logo {
|
|||||||
border-color: var(--bs-primary);
|
border-color: var(--bs-primary);
|
||||||
|
|
||||||
&:hover, &:focus {
|
&:hover, &:focus {
|
||||||
background-color: var(--pngx-primary-darken-10);
|
background-color: var(--pngx-primary-darken-5);
|
||||||
border-color: var(--pngx-primary-darken-10);
|
border-color: var(--pngx-primary-darken-5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled, &.disabled {
|
&:disabled, &.disabled {
|
||||||
color: var(--pngx-primary-text-contrast);
|
color: var(--pngx-primary-text-contrast);
|
||||||
background-color: var(--pngx-primary-darken-10) !important;
|
background-color: var(--pngx-primary-darken-5) !important;
|
||||||
border-color: var(--pngx-primary-darken-10) !important;
|
border-color: var(--pngx-primary-darken-5) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -128,7 +128,7 @@ svg.logo {
|
|||||||
|
|
||||||
a.navbar-brand:focus-visible {
|
a.navbar-brand:focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
color: var(--pngx-primary-darken-10);
|
color: var(--pngx-primary-darken-5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown.show {
|
.dropdown.show {
|
||||||
|
@ -1,15 +1,18 @@
|
|||||||
:root {
|
@mixin paperless-green {
|
||||||
// base color e.g. #17541f = hsl(128, 57%, 21%)
|
// base color e.g. #17541f = hsl(128, 57%, 21%)
|
||||||
--pngx-primary: 128, 57%;
|
--pngx-primary: 128, 57%;
|
||||||
--pngx-primary-lightness: 21%;
|
--pngx-primary-lightness: 21%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
@include paperless-green;
|
||||||
--pngx-primary-text-contrast: var(--bs-light);
|
--pngx-primary-text-contrast: var(--bs-light);
|
||||||
|
|
||||||
--bs-primary: hsl(var(--pngx-primary), var(--pngx-primary-lightness));
|
--bs-primary: hsl(var(--pngx-primary), var(--pngx-primary-lightness));
|
||||||
--bs-border-color: var(--bs-gray-400);
|
--bs-border-color: var(--bs-gray-400);
|
||||||
--pngx-primary-faded: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 72%));
|
--pngx-primary-faded: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 72%));
|
||||||
--pngx-primary-lighten-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 10%));
|
|
||||||
--pngx-primary-lighten-30: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 30%));
|
--pngx-primary-lighten-30: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 30%));
|
||||||
--pngx-primary-darken-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%));
|
--pngx-primary-darken-5: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 5%));
|
||||||
--pngx-primary-darken-15: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%));
|
--pngx-primary-darken-15: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%));
|
||||||
--pngx-primary-darken-18: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%));
|
--pngx-primary-darken-18: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%));
|
||||||
--pngx-bg-darker: var(--bs-gray-100);
|
--pngx-bg-darker: var(--bs-gray-100);
|
||||||
@ -41,9 +44,10 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Dark mode
|
// Dark mode
|
||||||
$primary-dark-mode: #45973a;
|
@mixin paperless-green-dark-mode {
|
||||||
$primary-dark-mode-rgb: 69, 151, 58;
|
--pngx-primary-lightness: 31%;
|
||||||
$primary-dark-mode-darken-10: darken($primary-dark-mode, 10%);
|
}
|
||||||
|
|
||||||
$danger-dark-mode: #b71631;
|
$danger-dark-mode: #b71631;
|
||||||
$danger-dark-mode-rgb: 183, 22, 49;
|
$danger-dark-mode-rgb: 183, 22, 49;
|
||||||
$bg-dark-mode: #161618;
|
$bg-dark-mode: #161618;
|
||||||
@ -55,7 +59,6 @@ $bg-light-dark-mode-rgb: 28, 28, 31;
|
|||||||
$border-color-dark-mode: #47494f;
|
$border-color-dark-mode: #47494f;
|
||||||
|
|
||||||
@mixin dark-mode {
|
@mixin dark-mode {
|
||||||
--bs-primary: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 10%));
|
|
||||||
--bs-body-color: #{$text-color-dark-bg};
|
--bs-body-color: #{$text-color-dark-bg};
|
||||||
--pngx-body-color-accent: #{$text-color-dark-bg-accent};
|
--pngx-body-color-accent: #{$text-color-dark-bg-accent};
|
||||||
--bs-danger: #{$danger-dark-mode};
|
--bs-danger: #{$danger-dark-mode};
|
||||||
@ -67,7 +70,7 @@ $border-color-dark-mode: #47494f;
|
|||||||
--bs-border-color: #{$border-color-dark-mode};
|
--bs-border-color: #{$border-color-dark-mode};
|
||||||
--pngx-bg-darker: #{$bg-dark-mode-accent};
|
--pngx-bg-darker: #{$bg-dark-mode-accent};
|
||||||
--pngx-bg-alt: #{$bg-dark-mode-alt};
|
--pngx-bg-alt: #{$bg-dark-mode-alt};
|
||||||
--pngx-focus-alpha: 0.7;
|
--pngx-focus-alpha: 0.6;
|
||||||
--pngx-primary-faded: var(--pngx-primary-darken-15);
|
--pngx-primary-faded: var(--pngx-primary-darken-15);
|
||||||
--pngx-primary-text-contrast: var(--bs-body-color);
|
--pngx-primary-text-contrast: var(--bs-body-color);
|
||||||
|
|
||||||
@ -75,7 +78,13 @@ $border-color-dark-mode: #47494f;
|
|||||||
color: var(--bs-body-color) !important;
|
color: var(--bs-body-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-outline-primary, .btn-primary {
|
.btn-primary {
|
||||||
|
&:hover, &:focus, &.active, &:active {
|
||||||
|
color: var(--bs-body-color) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-primary {
|
||||||
&:hover, &:focus, &.active, &:active {
|
&:hover, &:focus, &.active, &:active {
|
||||||
color: var(--bs-light) !important;
|
color: var(--bs-light) !important;
|
||||||
}
|
}
|
||||||
@ -88,6 +97,10 @@ $border-color-dark-mode: #47494f;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-light {
|
||||||
|
color: var(--bs-body-color);
|
||||||
|
}
|
||||||
|
|
||||||
.search-form-container {
|
.search-form-container {
|
||||||
input, input:focus {
|
input, input:focus {
|
||||||
color: var(--bs-body-color) !important;
|
color: var(--bs-body-color) !important;
|
||||||
@ -163,7 +176,7 @@ $border-color-dark-mode: #47494f;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.toast, .toast-header {
|
.toast, .toast-header {
|
||||||
background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%), 0.9);
|
background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%), 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast,
|
.toast,
|
||||||
@ -174,10 +187,31 @@ $border-color-dark-mode: #47494f;
|
|||||||
}
|
}
|
||||||
|
|
||||||
body.color-scheme-dark {
|
body.color-scheme-dark {
|
||||||
|
// no custom theme color
|
||||||
|
&:not(.primary-light):not(.primary-dark) {
|
||||||
|
@include paperless-green-dark-mode;
|
||||||
|
|
||||||
|
.navbar.bg-primary {
|
||||||
|
// navbar is og green in dark mode
|
||||||
|
@include paperless-green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@include dark-mode;
|
@include dark-mode;
|
||||||
}
|
}
|
||||||
body.color-scheme-system {
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
|
body.color-scheme-system {
|
||||||
|
// no custom theme color
|
||||||
|
&:not(.primary-light):not(.primary-dark) {
|
||||||
|
@include paperless-green-dark-mode;
|
||||||
|
|
||||||
|
.navbar.bg-primary {
|
||||||
|
// navbar is og green in dark mode
|
||||||
|
@include paperless-green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@include dark-mode;
|
@include dark-mode;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user