Fix: some css cleanup (#13891)

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

@@ -332,7 +332,7 @@
             </li>
             <li class="nav-item" [class.visually-hidden]="slimSidebarEnabled">
               <div class="text-muted small d-flex align-items-center flex-wrap nav-label">
-                <div class="me-3">
+                <div class="me-2">
                   <a class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer"
                     href="https://github.com/paperless-ngx/paperless-ngx" ngbPopover="GitHub" i18n-ngbPopover
                     [disablePopover]="!slimSidebarPopoversEnabled" placement="end" container="body"
@@ -341,7 +341,7 @@
                   </a>
                 </div>
                 @if (!settingsService.updateCheckingIsSet || appRemoteVersion()) {
-                  <div class="version-check">
+                  <div class="version-check d-flex align-items-center">
                     <ng-template #updateAvailablePopContent>
                       <span class="small">Paperless-ngx {{ appRemoteVersion().version }} <ng-container i18n>is
                           available.</ng-container><br /><ng-container i18n>Click to view.</ng-container></span>

src-ui/src/app/components/document-list/document-list.component.html

@@ -116,7 +116,7 @@
 
 </pngx-page-header>
 
-<div class="row sticky-top py-3 mt-n2 mt-md-n3 bg-body">
+<div class="row sticky-top py-3 mt-n2 mt-md-n3 bg-body rounded shadow-sm">
   <pngx-filter-editor [hidden]="isBulkEditing" [disabled]="isBulkEditing" [filterRules]="list.filterRules" (filterRulesChange)="onFilterRulesChange($event)" (resetFilterRules)="onFilterRulesReset($event)" [unmodifiedFilterRules]="unmodifiedFilterRules()" [selectionData]="list.selectionData" #filterEditor></pngx-filter-editor>
   <pngx-bulk-editor [hidden]="!isBulkEditing" [disabled]="!isBulkEditing"></pngx-bulk-editor>
 </div>

src-ui/src/styles.scss

@@ -47,6 +47,8 @@ $grid-breakpoints: (
 );
 
 :root {
+  --bs-border-radius: #{$border-radius};
+
   @each $name, $value in $grid-breakpoints {
     --bs-breakpoint-#{$name}: #{$value};
   }
@@ -78,19 +80,12 @@ body {
 }
 
 .btn {
-  --bs-btn-border-radius: .425rem;
-  --bs-border-radius-sm: .425rem;
+  --bs-border-radius-sm: #{$border-radius};
   font-weight: 500;
 }
 
-.form-control,
-.form-select,
-.input-group-text {
-  border-radius: .425rem;
-}
-
 .pagination, .input-group {
-  --bs-border-radius-sm: .425rem;
+  --bs-border-radius-sm: #{$border-radius};
 }
 
 @media(min-width: 768px) {
@@ -689,10 +684,6 @@ table.table {
   --bs-toast-max-width: var(--pngx-toast-max-width);
 }
 
-.alert {
-  --bs-border-radius: .425rem;
-}
-
 .alert-primary {
   --bs-alert-color: var(--bs-primary);
   --bs-alert-bg: var(--pngx-primary-faded);
@@ -824,8 +815,6 @@ code {
   --bs-accordion-bg: var(--bs-light);
   --bs-accordion-active-color: var(--bs-primary);
   --bs-accordion-active-bg: var(--pngx-bg-alt);
-  --bs-border-radius: .425rem;
-  --bs-accordion-inner-border-radius: calc(.425rem - 1px);
 }
 
 .accordion-button::after {

src-ui/src/theme.scss

@@ -113,6 +113,7 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,%3csvg xmlns='h
   --bs-tertiary-bg: var(--pngx-bg-darker);
   --bs-dark-border-subtle: var(--pngx-bg-darker);
   --bs-border-color-translucent: rgba(0, 0, 0, .175); // override bs
+  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); // slightly darker than bs default
 
   .text-dark, .text-light {
     color: var(--bs-body-color) !important;