miscellaneous css fixes / reorganization

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;
   }

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, 'primary-dark')
-    this.renderer.removeClass(this.document.body, 'text-bg-light')
+    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.addClass(this.document.body, 'primary-dark')
-        this.renderer.removeClass(this.document.body, 'text-bg-light')
+        this.renderer.removeClass(this.document.body, 'primary-light')
       } else {
-        this.renderer.addClass(this.document.body, 'text-bg-light')
+        this.renderer.addClass(this.document.body, 'primary-light')
-        this.renderer.removeClass(this.document.body, 'text-bg-dark')
+        this.renderer.removeClass(this.document.body, 'primary-dark')
       }
       this.renderer.setStyle(
         document.documentElement,

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);
 }

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 {
+  .toast, .toast-header {
-    background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%), 0.9);
+    background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%), 0.9);
   }
 
-  .toast-header {
+  .toast,
-    background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%), 0.9);
+  .toast .toast-header,
+  .toast .btn-close {
+    color: var(--pngx-primary-text-contrast);
   }
 }