unify some button colors

src-ui/src/theme.scss

@@ -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-20: hsl(var(--ngx-green), calc(var(--l) - 20%));
-  --ngx-primary-darken-25: hsl(var(--ngx-green), calc(var(--l) - 25%));
 }
 
 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);
+}

src-ui/src/theme_dark.scss

@@ -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 {