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

unify some button colors

Browse Source
This commit is contained in:
Michael Shamoon 2022-03-08 15:38:16 -08:00
parent 383cf7f4d5
commit 7c313eed33
2 changed files with 51 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,8 +8,7 @@
--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-25: hsl(var(--ngx-green), calc(var(--l) - 25%));
--ngx-primary-darken-20: hsl(var(--ngx-green), calc(var(--l) - 20%));
}
svg.logo {
@ -37,17 +36,17 @@ svg.logo {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
&:hover, &:focus {
background-color: var(--ngx-primary-darken-10);
border-color: var(--ngx-primary-darken-10);
}
&:disabled, &.disabled {
background-color: var(--ngx-primary-darken-10) !important;
border-color: var(--ngx-primary-darken-10) !important;
}
}
.btn-primary:hover {
background-color: var(--ngx-primary-darken-10);
border-color: var(--ngx-primary-darken-10);
}
.btn-outline-primary {
border-color: var(--bs-primary) !important;
color: var(--bs-primary) !important;
@ -58,10 +57,16 @@ svg.logo {
}
}
.btn-outline-secondary {
color: var(--bs-secondary);
}
.btn:focus,
.dropdown-item:focus,
.btn-check:focus + .btn,
.form-control:focus {
.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);
}
@ -91,7 +96,7 @@ textarea,
border-color: var(--bs-border-color);
&:focus {
background-color: var(--ngx-bg-color-darker);
background-color: var(--ngx-bg-darker);
color: var(--bs-body-color) !important;
}
}
@ -118,7 +123,7 @@ textarea,
}
.page-item.disabled .page-link {
background-color: var(--ngx-primary-darken-15);
background-color: var(--ngx-bg-darker);
}
.nav-tabs {
@ -203,7 +208,7 @@ table.table {
}
.ngx-file-drop__drop-zone--over {
background-color: var(--ngx-primary-darken-25)
background-color: var(--ngx-primary-darken-20)
}
.ngb-dp-header,
@ -211,3 +216,30 @@ table.table {
.ngb-dp-month {
background-color: var(--bs-body-bg);
}
.popover {
.popover-header,
.popover-body {
background-color: var(--ngx-bg-alt);
border-color: var(--bs-border-color);
}
}
// fix popover carat colors
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="left"] {
border-left-color: var(--ngx-bg-alt);
}
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="right"] {
border-right-color: var(--ngx-bg-alt);
}
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="top"] {
border-top-color: var(--ngx-bg-alt);
}
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="bottom"] {
border-bottom-color: var(--ngx-bg-alt);
}
.bs-popover-bottom .popover-header::before,
.bs-popover-auto[x-placement^=bottom] .popover-header::before {
border-bottom-color: var(--ngx-bg-alt);
}

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

@ -5,7 +5,8 @@ $danger-dark-mode: #b71631;
$danger-dark-mode-rgb: 183, 22, 49;
$bg-dark-mode: #161618;
$bg-dark-mode-rgb: 22, 22, 24;
$bg-dark-mode-accent: #21262d;
$bg-dark-mode-accent: #0a0b0e;
$bg-dark-mode-alt: #242529;
$bg-light-dark-mode: #1c1c1f;
$bg-light-dark-mode-rgb: 28, 28, 31;
$text-color-dark-mode: #abb2bf;
@ -26,7 +27,8 @@ $border-color-dark-mode: #47494f;
--bs-light: #{$bg-light-dark-mode};
--bs-light-rgb: #{$bg-light-dark-mode-rgb};
--bs-border-color: #{$border-color-dark-mode};
--ngx-bg-color-darker: #{$bg-dark-mode-accent};
--ngx-bg-darker: #{$bg-dark-mode-accent};
--ngx-bg-alt: #{$bg-dark-mode-alt};
.navbar.bg-primary{
--bs-primary: hsl(var(--ngx-green),var(--l));
@ -57,6 +59,10 @@ $border-color-dark-mode: #47494f;
color: var(--bs-body-color) !important;
}
.btn-outline-secondary:hover {
background-color: var(--ngx-bg-darker);
}
.card {
background-color: var(--bs-body-bg);
}
@ -127,33 +133,6 @@ $border-color-dark-mode: #47494f;
.modal .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
.popover {
.popover-header,
.popover-body {
background-color: $bg-dark-mode-accent;
border-color: $border-color-dark-mode;
}
}
// fix popover carat colors
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="left"] {
border-left-color: $bg-dark-mode-accent;
}
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="right"] {
border-right-color: $bg-dark-mode-accent;
}
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="top"] {
border-top-color: $bg-dark-mode-accent;
}
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="bottom"] {
border-bottom-color: $bg-dark-mode-accent;
}
.bs-popover-bottom .popover-header::before,
.bs-popover-auto[x-placement^=bottom] .popover-header::before {
border-bottom-color: $bg-dark-mode-accent;
}
}
body.color-scheme-dark {