paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-10-30 03:56:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

miscellaneous css fixes / reorganization

Browse Source
This commit is contained in:
Michael Shamoon
2022-04-13 09:29:23 -07:00
parent 1d7ddcc10d
commit 6478db13e6
4 changed files with 50 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,10 +35,15 @@
.sidebar .nav-link {
font-weight: 500;
&:hover, &.active {
&:hover, &.active, &:focus {
color: var(--bs-primary);
}
&:focus-visible {
outline: none;
background-color: var(--bs-body-bg);
}
&.active {
font-weight: bold;
}

12
src-ui/src/app/services/settings.service.ts
View File

@@ -137,19 +137,19 @@ export class SettingsService {
}
// remove these in case they were there
this.renderer.removeClass(this.document.body, 'text-bg-dark')
this.renderer.removeClass(this.document.body, 'text-bg-light')
this.renderer.removeClass(this.document.body, 'primary-dark')
this.renderer.removeClass(this.document.body, 'primary-light')
if (themeColor) {
const hsl = hexToHsl(themeColor)
const bgBrightnessEstimate = estimateBrightnessForColor(themeColor)
if (bgBrightnessEstimate == BRIGHTNESS.DARK) {
this.renderer.addClass(this.document.body, 'text-bg-dark')
this.renderer.removeClass(this.document.body, 'text-bg-light')
this.renderer.addClass(this.document.body, 'primary-dark')
this.renderer.removeClass(this.document.body, 'primary-light')
} else {
this.renderer.addClass(this.document.body, 'text-bg-light')
this.renderer.removeClass(this.document.body, 'text-bg-dark')
this.renderer.addClass(this.document.body, 'primary-light')
this.renderer.removeClass(this.document.body, 'primary-dark')
}
this.renderer.setStyle(
document.documentElement,

40
src-ui/src/styles.scss
View File

@@ -25,6 +25,27 @@ svg.logo {
}
}
.navbar.bg-primary {
--bs-primary: hsl(var(--pngx-primary),var(--pngx-primary-lightness));
--bs-primary-rgb: var(--bs-primary);
}
.border {
border-color: var(--bs-border-color) !important;
}
.border-end {
border-right: 1px solid var(--bs-border-color) !important;
}
.border-start {
border-left: 1px solid var(--bs-border-color) !important;
}
.border-bottom {
border-bottom: 1px solid var(--bs-border-color) !important;
}
.nav-link, .list-group-item {
color: var(--bs-body-color);
}
@@ -100,9 +121,9 @@ svg.logo {
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#bbb'/></svg>"));
}
.nav-link:focus-visible, .nav-item a:focus-visible {
.nav-item a:focus-visible {
outline: none;
background-color: var(--pngx-bg-darker);
background-color: var(--bs-body-bg);
}
a.navbar-brand:focus-visible {
@@ -335,6 +356,13 @@ textarea,
}
}
.doc-img-container {
border: none !important;
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
overflow: hidden;
}
// icons
.toolbaricon {
width: 1.2em;
@@ -360,14 +388,6 @@ table.table {
}
}
.toast {
color: var(--pngx-primary-text-contrast);
.toast-header {
color: var(--pngx-primary-text-contrast);
}
}
.close {
color: var(--bs-body-color);
}

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

@@ -24,7 +24,7 @@ $text-color-dark-bg-accent: lighten($text-color-dark-bg, 10%);
$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");
$form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#212529'/></svg>");
.text-bg-light {
.primary-light {
--pngx-primary-text-contrast: #{$text-color-light-bg} !important;
.form-check-input:checked[type=checkbox] {
@@ -36,7 +36,7 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
}
}
.text-bg-dark {
.primary-dark {
--pngx-primary-text-contrast: #{$text-color-dark-bg} !important;
}
@@ -71,27 +71,6 @@ $border-color-dark-mode: #47494f;
--pngx-primary-faded: var(--pngx-primary-darken-15);
--pngx-primary-text-contrast: var(--bs-body-color);
.navbar.bg-primary {
--bs-primary: hsl(var(--pngx-primary),var(--pngx-primary-lightness));
--bs-primary-rgb: var(--bs-primary);
}
.border {
border-color: var(--bs-border-color) !important;
}
.border-end {
border-right: 1px solid var(--bs-border-color) !important;
}
.border-start {
border-left: 1px solid var(--bs-border-color) !important;
}
.border-bottom {
border-bottom: 1px solid var(--bs-border-color) !important;
}
.text-dark, .text-light {
color: var(--bs-body-color) !important;
}
@@ -132,13 +111,6 @@ $border-color-dark-mode: #47494f;
filter: brightness(.8);
}
.doc-img-container {
border: none !important;
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
overflow: hidden;
}
.doc-img {
mix-blend-mode: normal;
border-radius: 0;
@@ -190,12 +162,14 @@ $border-color-dark-mode: #47494f;
filter: invert(1) grayscale(100%) brightness(200%);
}
.toast {
background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%), 0.9);
.toast, .toast-header {
background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%), 0.9);
}
.toast-header {
background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%), 0.9);
.toast,
.toast .toast-header,
.toast .btn-close {
color: var(--pngx-primary-text-contrast);
}
}