fix scss organization

[ci skip]

src-ui/src/app/components/app-frame/app-frame.component.scss

@@ -35,20 +35,19 @@
 
 .sidebar .nav-link {
   font-weight: 500;
-}
 
-.sidebar .nav-link .sidebaricon {
+  &:hover, &.active {
-  margin-right: 4px;
-}
-
-.sidebar .nav-link.active {
     color: var(--bs-primary);
-  font-weight: bold;
+  }
-}
 
-.sidebar .nav-link.active .sidebaricon,
+  &.active {
-.sidebar .nav-link:hover .sidebaricon {
+    font-weight: bold;
+  }
+
+  .sidebaricon {
+    margin-right: 4px;
     color: inherit;
+  }
 }
 
 .sidebar-heading {

src-ui/src/styles.scss

@@ -132,3 +132,329 @@ a.badge {
     background-color: var(--bs-primary);
     border-color: var(--bs-primary);
 }
+
+// Paperless-ngx styles
+
+body {
+  height: 100vh;
+}
+
+svg.logo {
+  .leaf {
+    fill: var(--bs-primary) !important;
+  }
+  .text {
+    fill: var(--bs-body-color) !important;
+  }
+}
+
+.nav-link, .list-group-item {
+  color: var(--bs-body-color);
+}
+
+.bg-body {
+  background-color: var(--bs-body-bg);
+}
+
+.bg-primary {
+  background-color: var(--bs-primary) !important;
+}
+
+.btn-primary {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+
+  &:hover, &:focus {
+    background-color: var(--pngx-primary-darken-10);
+    border-color: var(--pngx-primary-darken-10);
+  }
+
+  &:disabled, &.disabled {
+    background-color: var(--pngx-primary-darken-10) !important;
+    border-color: var(--pngx-primary-darken-10) !important;
+  }
+}
+
+.btn-outline-primary {
+  border-color: var(--bs-primary) !important;
+  color: var(--bs-primary) !important;
+
+  &:hover, &:focus, &.active, &:active {
+    background-color: var(--bs-primary) !important;
+    color: var(--bs-light) !important;
+  }
+}
+
+.btn-outline-secondary {
+  color: var(--bs-secondary);
+
+  &:hover {
+    color: var(--bs-light);
+  }
+}
+
+.nav-item .sidebaricon {
+  color: var(--bs-secondary);
+}
+
+.btn:focus,
+.btn:active:focus,
+.dropdown-item:focus,
+.btn-check:focus + .btn,
+.form-control:focus,
+.form-check-input:focus,
+.form-check-radio:focus,
+.form-select:focus {
+  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 {
+  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 {
+  outline: none;
+  background-color: var(--pngx-bg-darker);
+}
+
+a.navbar-brand:focus-visible {
+  outline: none;
+  color: var(--pngx-primary-darken-10);
+}
+
+.dropdown.show {
+  > .btn-primary {
+    background-color: var(--bs-primary);
+    border-color: var(--bs-primary);
+  }
+
+  > .btn-outline-primary {
+    color: var(--pngx-primary-text-contrast) !important;
+  }
+}
+
+a, a:hover, .btn-link, .btn-link:hover {
+  color: var(--bs-primary);
+}
+
+.form-control:not(.btn),
+input,
+select,
+textarea,
+.form-select:not(.is-invalid):not(:disabled),
+.form-check-input {
+  color: var(--bs-body-color);
+  background-color: var(--bs-body-bg);
+  border-color: var(--bs-border-color);
+
+  &:focus {
+    background-color: var(--pngx-bg-darker);
+    color: var(--bs-body-color);
+  }
+}
+
+.form-check-input:checked {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+}
+
+.form-check-input:focus {
+  border-color: var(--bs-primary);
+}
+
+.page-link {
+  color: var(--bs-secondary);
+  background-color: var(--bs-body-bg);
+  border-color: var(--bs-border-color) !important;
+
+  &:hover, &:focus {
+    background-color: var(--bs-primary) !important;
+    color: var(--bs-light) !important;
+  }
+}
+
+.page-item.active .page-link {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary) !important;
+  color: var(--bs-light);
+}
+
+.page-item.disabled .page-link {
+  background-color: var(--pngx-bg-darker);
+}
+
+.nav-tabs {
+  border-bottom: 1px solid var(--bs-border-color);
+
+  .nav-link {
+    color: var(--bs-primary);
+
+    &.active, &:hover {
+      border-color: var(--bs-border-color);
+      background-color: var(--bs-body-bg);
+      color: var(--bs-body-color);
+      border-bottom: 1px solid transparent;
+    }
+
+    &:focus {
+      border-color: var(--bs-border-color);
+    }
+
+    &.active:focus, &:active {
+      border-bottom: 1px solid transparent;
+    }
+  }
+}
+
+.ng-select-container,
+.ng-select.ng-select-opened > .ng-select-container,
+.ng-dropdown-panel,
+.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+  background-color: var(--bs-body-bg) !important;
+  color: var(--bs-body-color) !important;
+  border-color: var(--bs-border-color) !important;
+
+  input:focus {
+    background-color: transparent !important;
+  }
+}
+
+.input-group-text {
+  color: var(--bs-body-color);
+  background-color: var(--bs-body-bg);
+  border-color: var(--bs-border-color);
+}
+
+.list-group-item {
+  color: var(--bs-body-color);
+  background-color: var(--bs-body-bg);
+  border-color: var(--bs-border-color);
+
+  &:hover, &:focus {
+    background-color: var(--bs-body-bg);
+  }
+}
+
+.dropdown-menu {
+  background-color: var(--bs-body-bg);
+
+  .dropdown-divider {
+    border-color: var(--bs-border-color);
+  }
+
+  .dropdown-item {
+    color: var(--bs-body-color);
+
+    &:hover, &:focus {
+      background-color: var(--pngx-bg-darker);
+      color: var(--bs-body-color);
+    }
+
+    &.active {
+      background-color: var(--bs-primary);
+      color: var(--pngx-primary-text-contrast);
+    }
+  }
+}
+
+table.table {
+  color: var(--bs-body-color);
+
+  .des,.asc {
+    background-color: var(--bs-body-bg) !important;
+  }
+}
+
+.close {
+  color: var(--bs-body-color);
+}
+
+.modal .btn-close {
+  color: var(--bs-body-color);
+}
+
+.main-dropzone {
+  height: 100%;
+  width: 100%;
+
+  &.ngx-file-drop__drop-zone--over {
+    background-color: transparent !important;
+  }
+}
+
+.global-dropzone-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(23, 84, 31, .8);
+  z-index: 1055; // $zindex-modal
+  pointer-events: none !important;
+  user-select: none !important;
+  text-align: center;
+  padding-top: 25%;
+
+  &.show {
+    opacity: 1 !important;
+  }
+
+  &.hide {
+    display: none;
+  }
+}
+
+.ngx-file-drop__drop-zone--over .global-dropzone-overlay {
+  opacity: 0;
+}
+
+.inert {
+  pointer-events: none !important;
+  user-select: none !important;
+}
+
+.alert-danger {
+  color: var(--bs-body-color);
+  background-color: var(--bs-danger);
+  border-color: var(--bs-danger);
+}
+
+.alert-secondary {
+  background-color: var(--pngx-primary-darken-18);
+  border-color: var(--pngx-primary-darken-15);
+  color: var(--bs-body-color);
+}
+
+.ngb-dp-header,
+.ngb-dp-weekdays,
+.ngb-dp-month {
+  background-color: var(--bs-body-bg);
+}
+
+.popover {
+  .popover-header,
+  .popover-body {
+    background-color: var(--pngx-bg-alt);
+    border-color: var(--bs-border-color);
+    color: var(--bs-body-color);
+  }
+}
+
+// fix popover carat colors
+.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="left"] {
+  border-left-color: var(--pngx-bg-alt);
+}
+.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="right"] {
+  border-right-color: var(--pngx-bg-alt);
+}
+.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="top"] {
+  border-top-color: var(--pngx-bg-alt);
+}
+.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="bottom"] {
+  border-bottom-color: var(--pngx-bg-alt);
+}
+
+.bs-popover-bottom .popover-header::before,
+.bs-popover-auto[x-placement^=bottom] .popover-header::before {
+  border-bottom-color: var(--pngx-bg-alt);
+}

src-ui/src/theme.scss

@@ -15,327 +15,3 @@
   --pngx-bg-darker: var(--bs-gray-100);
   --pngx-focus-alpha: 0.3;
 }
-
-body {
-  height: 100vh;
-}
-
-svg.logo {
-  .leaf {
-    fill: var(--bs-primary) !important;
-  }
-  .text {
-    fill: var(--bs-body-color) !important;
-  }
-}
-
-.nav-link, .list-group-item {
-  color: var(--bs-body-color);
-}
-
-.bg-body {
-  background-color: var(--bs-body-bg);
-}
-
-.bg-primary {
-  background-color: var(--bs-primary) !important;
-}
-
-.btn-primary {
-  background-color: var(--bs-primary);
-  border-color: var(--bs-primary);
-
-  &:hover, &:focus {
-    background-color: var(--pngx-primary-darken-10);
-    border-color: var(--pngx-primary-darken-10);
-  }
-
-  &:disabled, &.disabled {
-    background-color: var(--pngx-primary-darken-10) !important;
-    border-color: var(--pngx-primary-darken-10) !important;
-  }
-}
-
-.btn-outline-primary {
-  border-color: var(--bs-primary) !important;
-  color: var(--bs-primary) !important;
-
-  &:hover, &:focus, &.active, &:active {
-    background-color: var(--bs-primary) !important;
-    color: var(--bs-light) !important;
-  }
-}
-
-.btn-outline-secondary {
-  color: var(--bs-secondary);
-
-  &:hover {
-    color: var(--bs-light);
-  }
-}
-
-.nav-item .sidebaricon {
-  color: var(--bs-secondary);
-}
-
-.btn:focus,
-.btn:active:focus,
-.dropdown-item:focus,
-.btn-check:focus + .btn,
-.form-control:focus,
-.form-check-input:focus,
-.form-check-radio:focus,
-.form-select:focus {
-  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 {
-  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 {
-  outline: none;
-  background-color: var(--pngx-bg-darker);
-}
-
-a.navbar-brand:focus-visible {
-  outline: none;
-  color: var(--pngx-primary-darken-10);
-}
-
-.dropdown.show {
-  > .btn-primary {
-    background-color: var(--bs-primary);
-    border-color: var(--bs-primary);
-  }
-
-  > .btn-outline-primary {
-    color: var(--pngx-primary-text-contrast) !important;
-  }
-}
-
-a, a:hover, .btn-link, .btn-link:hover {
-  color: var(--bs-primary);
-}
-
-.form-control:not(.btn),
-input,
-select,
-textarea,
-.form-select:not(.is-invalid):not(:disabled),
-.form-check-input {
-  color: var(--bs-body-color);
-  background-color: var(--bs-body-bg);
-  border-color: var(--bs-border-color);
-
-  &:focus {
-    background-color: var(--pngx-bg-darker);
-    color: var(--bs-body-color);
-  }
-}
-
-.form-check-input:checked {
-  background-color: var(--bs-primary);
-  border-color: var(--bs-primary);
-}
-
-.form-check-input:focus {
-  border-color: var(--bs-primary);
-}
-
-.page-link {
-  color: var(--bs-secondary);
-  background-color: var(--bs-body-bg);
-  border-color: var(--bs-border-color) !important;
-
-  &:hover, &:focus {
-    background-color: var(--bs-primary) !important;
-    color: var(--bs-light) !important;
-  }
-}
-
-.page-item.active .page-link {
-  background-color: var(--bs-primary);
-  border-color: var(--bs-primary) !important;
-  color: var(--bs-light);
-}
-
-.page-item.disabled .page-link {
-  background-color: var(--pngx-bg-darker);
-}
-
-.nav-tabs {
-  border-bottom: 1px solid var(--bs-border-color);
-
-  .nav-link {
-    color: var(--bs-primary);
-
-    &.active, &:hover {
-      border-color: var(--bs-border-color);
-      background-color: var(--bs-body-bg);
-      color: var(--bs-body-color);
-      border-bottom: 1px solid transparent;
-    }
-
-    &:focus {
-      border-color: var(--bs-border-color);
-    }
-
-    &.active:focus, &:active {
-      border-bottom: 1px solid transparent;
-    }
-  }
-}
-
-.ng-select-container,
-.ng-select.ng-select-opened > .ng-select-container,
-.ng-dropdown-panel,
-.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
-  background-color: var(--bs-body-bg) !important;
-  color: var(--bs-body-color) !important;
-  border-color: var(--bs-border-color) !important;
-
-  input:focus {
-    background-color: transparent !important;
-  }
-}
-
-.input-group-text {
-  color: var(--bs-body-color);
-  background-color: var(--bs-body-bg);
-  border-color: var(--bs-border-color);
-}
-
-.list-group-item {
-  color: var(--bs-body-color);
-  background-color: var(--bs-body-bg);
-  border-color: var(--bs-border-color);
-
-  &:hover, &:focus {
-    background-color: var(--bs-body-bg);
-  }
-}
-
-.dropdown-menu {
-  background-color: var(--bs-body-bg);
-
-  .dropdown-divider {
-    border-color: var(--bs-border-color);
-  }
-
-  .dropdown-item {
-    color: var(--bs-body-color);
-
-    &:hover, &:focus {
-      background-color: var(--pngx-bg-darker);
-      color: var(--bs-body-color);
-    }
-
-    &.active {
-      background-color: var(--bs-primary);
-      color: var(--pngx-primary-text-contrast);
-    }
-  }
-}
-
-table.table {
-  color: var(--bs-body-color);
-
-  .des,.asc {
-    background-color: var(--bs-body-bg) !important;
-  }
-}
-
-.close {
-  color: var(--bs-body-color);
-}
-
-.modal .btn-close {
-  color: var(--bs-body-color);
-}
-
-.main-dropzone {
-  height: 100%;
-  width: 100%;
-
-  &.ngx-file-drop__drop-zone--over {
-    background-color: transparent !important;
-  }
-}
-
-.global-dropzone-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: rgba(23, 84, 31, .8);
-  z-index: 1055; // $zindex-modal
-  pointer-events: none !important;
-  user-select: none !important;
-  text-align: center;
-  padding-top: 25%;
-
-  &.show {
-    opacity: 1 !important;
-  }
-
-  &.hide {
-    display: none;
-  }
-}
-
-.ngx-file-drop__drop-zone--over .global-dropzone-overlay {
-  opacity: 0;
-}
-
-.inert {
-  pointer-events: none !important;
-  user-select: none !important;
-}
-
-.alert-danger {
-  color: var(--bs-body-color);
-  background-color: var(--bs-danger);
-  border-color: var(--bs-danger);
-}
-
-.alert-secondary {
-  background-color: var(--pngx-primary-darken-18);
-  border-color: var(--pngx-primary-darken-15);
-  color: var(--bs-body-color);
-}
-
-.ngb-dp-header,
-.ngb-dp-weekdays,
-.ngb-dp-month {
-  background-color: var(--bs-body-bg);
-}
-
-.popover {
-  .popover-header,
-  .popover-body {
-    background-color: var(--pngx-bg-alt);
-    border-color: var(--bs-border-color);
-    color: var(--bs-body-color);
-  }
-}
-
-// fix popover carat colors
-.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="left"] {
-  border-left-color: var(--pngx-bg-alt);
-}
-.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="right"] {
-  border-right-color: var(--pngx-bg-alt);
-}
-.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="top"] {
-  border-top-color: var(--pngx-bg-alt);
-}
-.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="bottom"] {
-  border-bottom-color: var(--pngx-bg-alt);
-}
-
-.bs-popover-bottom .popover-header::before,
-.bs-popover-auto[x-placement^=bottom] .popover-header::before {
-  border-bottom-color: var(--pngx-bg-alt);
-}