From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 13 Apr 2022 16:29:23 +0000 (-0700)
Subject: miscellaneous css fixes / reorganization
X-Git-Tag: ngx-1.7.0~1^2~9^2
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F717%2Fhead;p=thirdparty%2Fpaperless-ngx.git

miscellaneous css fixes / reorganization
---

diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss
index 5511a29b05..5fe408660b 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.scss
+++ b/src-ui/src/app/components/app-frame/app-frame.component.scss
@@ -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;
   }
diff --git a/src-ui/src/app/services/settings.service.ts b/src-ui/src/app/services/settings.service.ts
index 747c21fb7b..a6e9721685 100644
--- a/src-ui/src/app/services/settings.service.ts
+++ b/src-ui/src/app/services/settings.service.ts
@@ -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,
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index 6922e3d7c8..0838661ae6 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -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);
 }
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index ea7995be8e..a24586879c 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -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);
   }
 }