fix some css specificity issues, unused vars

This commit is contained in:
Michael Shamoon 2022-04-16 00:23:15 -07:00
parent 7b7534c952
commit 3a8cc31f1b
3 changed files with 55 additions and 21 deletions

View File

@ -152,25 +152,25 @@ export class SettingsService {
this.renderer.removeClass(this.document.body, 'primary-dark')
}
this.renderer.setStyle(
document.documentElement,
document.body,
'--pngx-primary',
`${+hsl.h * 360},${hsl.s * 100}%`,
RendererStyleFlags2.DashCase
)
this.renderer.setStyle(
document.documentElement,
document.body,
'--pngx-primary-lightness',
`${hsl.l * 100}%`,
RendererStyleFlags2.DashCase
)
} else {
this.renderer.removeStyle(
document.documentElement,
document.body,
'--pngx-primary',
RendererStyleFlags2.DashCase
)
this.renderer.removeStyle(
document.documentElement,
document.body,
'--pngx-primary-lightness',
RendererStyleFlags2.DashCase
)

View File

@ -73,14 +73,14 @@ svg.logo {
border-color: var(--bs-primary);
&:hover, &:focus {
background-color: var(--pngx-primary-darken-10);
border-color: var(--pngx-primary-darken-10);
background-color: var(--pngx-primary-darken-5);
border-color: var(--pngx-primary-darken-5);
}
&:disabled, &.disabled {
color: var(--pngx-primary-text-contrast);
background-color: var(--pngx-primary-darken-10) !important;
border-color: var(--pngx-primary-darken-10) !important;
background-color: var(--pngx-primary-darken-5) !important;
border-color: var(--pngx-primary-darken-5) !important;
}
}
@ -128,7 +128,7 @@ svg.logo {
a.navbar-brand:focus-visible {
outline: none;
color: var(--pngx-primary-darken-10);
color: var(--pngx-primary-darken-5);
}
.dropdown.show {

View File

@ -1,15 +1,18 @@
:root {
@mixin paperless-green {
// base color e.g. #17541f = hsl(128, 57%, 21%)
--pngx-primary: 128, 57%;
--pngx-primary-lightness: 21%;
}
body {
@include paperless-green;
--pngx-primary-text-contrast: var(--bs-light);
--bs-primary: hsl(var(--pngx-primary), var(--pngx-primary-lightness));
--bs-border-color: var(--bs-gray-400);
--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-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-18: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%));
--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
$primary-dark-mode: #45973a;
$primary-dark-mode-rgb: 69, 151, 58;
$primary-dark-mode-darken-10: darken($primary-dark-mode, 10%);
@mixin paperless-green-dark-mode {
--pngx-primary-lightness: 31%;
}
$danger-dark-mode: #b71631;
$danger-dark-mode-rgb: 183, 22, 49;
$bg-dark-mode: #161618;
@ -55,7 +59,6 @@ $bg-light-dark-mode-rgb: 28, 28, 31;
$border-color-dark-mode: #47494f;
@mixin dark-mode {
--bs-primary: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 10%));
--bs-body-color: #{$text-color-dark-bg};
--pngx-body-color-accent: #{$text-color-dark-bg-accent};
--bs-danger: #{$danger-dark-mode};
@ -67,7 +70,7 @@ $border-color-dark-mode: #47494f;
--bs-border-color: #{$border-color-dark-mode};
--pngx-bg-darker: #{$bg-dark-mode-accent};
--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-text-contrast: var(--bs-body-color);
@ -75,7 +78,13 @@ $border-color-dark-mode: #47494f;
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 {
color: var(--bs-light) !important;
}
@ -88,6 +97,10 @@ $border-color-dark-mode: #47494f;
}
}
.btn-light {
color: var(--bs-body-color);
}
.search-form-container {
input, input:focus {
color: var(--bs-body-color) !important;
@ -163,7 +176,7 @@ $border-color-dark-mode: #47494f;
}
.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,
@ -174,10 +187,31 @@ $border-color-dark-mode: #47494f;
}
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;
}
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;
}
}