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

minor css hover + focus state fixes

Browse Source 
[ci skip]
This commit is contained in:
Michael Shamoon 2022-04-07 13:51:36 -07:00
parent d00e8d3b0f
commit 9f9d7da1ce
3 changed files with 50 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src-ui/src/app/components/app-frame/app-frame.component.scss
View File

@ -171,6 +171,7 @@
&:focus { &:focus {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
color: var(--bs-light);
flex-grow: 1; flex-grow: 1;
padding-left: 0.5rem; padding-left: 0.5rem;
} }

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

@ -2,17 +2,18 @@
// 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%;
--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);
--ngx-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%));
--ngx-primary-lighten-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 10%)); --pngx-primary-lighten-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 10%));
--ngx-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%));
--ngx-primary-darken-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%)); --pngx-primary-darken-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%));
--ngx-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%));
--ngx-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%));
--ngx-bg-darker: var(--bs-gray-100); --pngx-bg-darker: var(--bs-gray-100);
--ngx-focus-alpha: 0.3; --pngx-focus-alpha: 0.3;
} }
body { body {
@ -45,13 +46,13 @@ svg.logo {
border-color: var(--bs-primary); border-color: var(--bs-primary);
&:hover, &:focus { &:hover, &:focus {
background-color: var(--ngx-primary-darken-10); background-color: var(--pngx-primary-darken-10);
border-color: var(--ngx-primary-darken-10); border-color: var(--pngx-primary-darken-10);
} }
&:disabled, &.disabled { &:disabled, &.disabled {
background-color: var(--ngx-primary-darken-10) !important; background-color: var(--pngx-primary-darken-10) !important;
border-color: var(--ngx-primary-darken-10) !important; border-color: var(--pngx-primary-darken-10) !important;
} }
} }
@ -67,6 +68,10 @@ svg.logo {
.btn-outline-secondary { .btn-outline-secondary {
color: var(--bs-secondary); color: var(--bs-secondary);
&:hover {
color: var(--bs-light);
}
} }
.nav-item .sidebaricon { .nav-item .sidebaricon {
@ -81,7 +86,7 @@ svg.logo {
.form-check-input:focus, .form-check-input:focus,
.form-check-radio:focus, .form-check-radio:focus,
.form-select:focus { .form-select:focus {
box-shadow: 0 0 0 0.25rem hsla(var(--pngx-primary), var(--pngx-primary-lightness), var(--ngx-focus-alpha)); box-shadow: 0 0 0 0.25rem hsla(var(--pngx-primary), var(--pngx-primary-lightness), var(--pngx-focus-alpha));
} }
.form-switch .form-check-input:focus { .form-switch .form-check-input:focus {
@ -90,12 +95,12 @@ svg.logo {
.nav-link:focus-visible, .nav-item a:focus-visible { .nav-link:focus-visible, .nav-item a:focus-visible {
outline: none; outline: none;
background-color: var(--ngx-bg-darker); background-color: var(--pngx-bg-darker);
} }
a.navbar-brand:focus-visible { a.navbar-brand:focus-visible {
outline: none; outline: none;
color: var(--ngx-primary-darken-10); color: var(--pngx-primary-darken-10);
} }
.dropdown.show { .dropdown.show {
@ -105,7 +110,7 @@ a.navbar-brand:focus-visible {
} }
> .btn-outline-primary { > .btn-outline-primary {
color: var(--bs-body-color) !important; color: var(--pngx-primary-text-contrast) !important;
} }
} }
@ -124,8 +129,8 @@ textarea,
border-color: var(--bs-border-color); border-color: var(--bs-border-color);
&:focus { &:focus {
background-color: var(--ngx-bg-darker); background-color: var(--pngx-bg-darker);
color: var(--bs-body-color) !important; color: var(--bs-body-color);
} }
} }
@ -156,7 +161,7 @@ textarea,
} }
.page-item.disabled .page-link { .page-item.disabled .page-link {
background-color: var(--ngx-bg-darker); background-color: var(--pngx-bg-darker);
} }
.nav-tabs { .nav-tabs {
@ -221,13 +226,14 @@ textarea,
.dropdown-item { .dropdown-item {
color: var(--bs-body-color); color: var(--bs-body-color);
&:hover { &:hover, &:focus {
background-color: var(--ngx-bg-darker); background-color: var(--pngx-bg-darker);
color: var(--bs-body-color); color: var(--bs-body-color);
} }
&.active { &.active {
background-color: var(--bs-primary); background-color: var(--bs-primary);
color: var(--pngx-primary-text-contrast);
} }
} }
} }
@ -295,8 +301,8 @@ table.table {
} }
.alert-secondary { .alert-secondary {
background-color: var(--ngx-primary-darken-18); background-color: var(--pngx-primary-darken-18);
border-color: var(--ngx-primary-darken-15); border-color: var(--pngx-primary-darken-15);
color: var(--bs-body-color); color: var(--bs-body-color);
} }
@ -309,7 +315,7 @@ table.table {
.popover { .popover {
.popover-header, .popover-header,
.popover-body { .popover-body {
background-color: var(--ngx-bg-alt); background-color: var(--pngx-bg-alt);
border-color: var(--bs-border-color); border-color: var(--bs-border-color);
color: var(--bs-body-color); color: var(--bs-body-color);
} }
@ -317,19 +323,19 @@ table.table {
// fix popover carat colors // fix popover carat colors
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="left"] { .bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="left"] {
border-left-color: var(--ngx-bg-alt); border-left-color: var(--pngx-bg-alt);
} }
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="right"] { .bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="right"] {
border-right-color: var(--ngx-bg-alt); border-right-color: var(--pngx-bg-alt);
} }
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="top"] { .bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="top"] {
border-top-color: var(--ngx-bg-alt); border-top-color: var(--pngx-bg-alt);
} }
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="bottom"] { .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="bottom"] {
border-bottom-color: var(--ngx-bg-alt); border-bottom-color: var(--pngx-bg-alt);
} }
.bs-popover-bottom .popover-header::before, .bs-popover-bottom .popover-header::before,
.bs-popover-auto[x-placement^=bottom] .popover-header::before { .bs-popover-auto[x-placement^=bottom] .popover-header::before {
border-bottom-color: var(--ngx-bg-alt); border-bottom-color: var(--pngx-bg-alt);
} }

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

@ -27,11 +27,12 @@ $border-color-dark-mode: #47494f;
--bs-light: #{$bg-light-dark-mode}; --bs-light: #{$bg-light-dark-mode};
--bs-light-rgb: #{$bg-light-dark-mode-rgb}; --bs-light-rgb: #{$bg-light-dark-mode-rgb};
--bs-border-color: #{$border-color-dark-mode}; --bs-border-color: #{$border-color-dark-mode};
--ngx-bg-darker: #{$bg-dark-mode-accent}; --pngx-bg-darker: #{$bg-dark-mode-accent};
--ngx-bg-alt: #{$bg-dark-mode-alt}; --pngx-bg-alt: #{$bg-dark-mode-alt};
--ngx-body-color-accent: #{$text-color-dark-mode-accent}; --pngx-body-color-accent: #{$text-color-dark-mode-accent};
--ngx-focus-alpha: 0.7; --pngx-focus-alpha: 0.7;
--ngx-primary-faded: var(--ngx-primary-darken-15); --pngx-primary-faded: var(--pngx-primary-darken-15);
--pngx-primary-text-contrast: var(--bs-body-color);
.navbar.bg-primary{ .navbar.bg-primary{
--bs-primary: hsl(var(--pngx-primary),var(--pngx-primary-lightness)); --bs-primary: hsl(var(--pngx-primary),var(--pngx-primary-lightness));
@ -64,17 +65,23 @@ $border-color-dark-mode: #47494f;
.btn-outline-primary, .btn-primary { .btn-outline-primary, .btn-primary {
&:hover, &:focus, &.active, &:active { &:hover, &:focus, &.active, &:active {
color: var(--ngx-body-color-accent) !important; color: var(--bs-light) !important;
} }
} }
.btn-outline-secondary { .btn-outline-secondary {
&:hover, &:focus, &.active, &:active { &:hover, &:focus, &.active, &:active {
background-color: var(--ngx-bg-darker); background-color: var(--pngx-bg-darker);
color: var(--bs-primary); color: var(--bs-primary);
} }
} }
.search-form-container {
input, input:focus {
color: var(--bs-body-color) !important;
}
}
.card { .card {
background-color: var(--bs-body-bg); background-color: var(--bs-body-bg);