paperless-ngx/src-ui/src/styles.scss

// bs options
$enable-negative-margins: true;

@import "theme";
@import "node_modules/bootstrap/scss/bootstrap";
@import "~@ng-select/ng-select/themes/default.theme.css";
@import "print";

// Paperless-ngx styles
body {
  font-size: 0.875rem;
  height: 100vh;
}

* {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

svg.logo {
  .leaf {
    fill: var(--bs-primary) !important;
  }
  .text {
    fill: var(--bs-body-color) !important;
  }
}

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

.bg-body {
  background-color: var(--bs-body-bg);
}

.bg-primary {
  background-color: var(--bs-primary) !important;
  color: var(--pngx-primary-text-contrast);
}

.navbar-brand {
  color: var(--pngx-primary-text-contrast) !important;
}

.navbar .dropdown .btn {
  color: var(--pngx-primary-text-contrast) !important;
}

.btn-primary {
  color: var(--pngx-primary-text-contrast);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);

  &:hover, &:focus {
    background-color: var(--pngx-primary-darken-5) !important;
    border-color: var(--pngx-primary-darken-5) !important;
  }

  &:disabled, &.disabled {
    color: var(--pngx-primary-text-contrast);
    background-color: var(--pngx-primary-darken-5) !important;
    border-color: var(--pngx-primary-darken-5) !important;
  }
}

.btn-dark {
  --bs-btn-color: var(--bs-gray-600);
  --bs-btn-bg: var(--bs-gray-200);
  --bs-btn-border-color: var(--bs-gray-200);
  --bs-btn-hover-bg: var(--bs-gray-400);
  --bs-btn-hover-border-color: var(--bs-gray-500);
  --bs-btn-active-bg: var(--bs-gray-200);
}

.text-primary {
  color: var(--bs-primary) !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));
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
  background-color: var(--bs-primary);
  color: var(--pngx-primary-text-contrast) !important;
}

.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-item a:focus-visible {
  outline: none;
  background-color: var(--bs-body-bg);
}

a.navbar-brand:focus-visible {
  outline: none;
  color: var(--pngx-primary-darken-5);
}

.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 {
  color: var(--bs-primary);
}

.btn-link:hover,
.btn-link:active {
  color: var(--pngx-primary-darken-15) !important;
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark::placeholder {
  color: #fff;
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

.asc {
  background-color: #f8f9fa!important;
}

.asc:after {
  content: '';
  transform: rotate(180deg);
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAmxJREFUeAHtmksrRVEUx72fH8CIGQNJkpGUUmakDEiZSJRIZsRQmCkTJRmZmJgQE0kpX0D5DJKJgff7v+ru2u3O3vvc67TOvsdatdrnnP1Y///v7HvvubdbUiIhBISAEBACQkAICAEhIAQ4CXSh2DnyDfmCPEG2Iv9F9MPlM/LHyAecdyMzHYNwR3fdNK/OH9HXl1UCozD24TCvILxizEDWIEzA0FcM8woCgRrJCoS5PIwrANQSMAJX1LEI9bqpQo4JYNFFKRSvIgsxHDVnqZgIkPnNBM0rIGtYk9YOOsqgbgepRCfdbmFtqhFkVEDVPjJp0+Z6e6hRHhqBKgg6ZDCvYBygVmUoEGoh5JTRvIJwhJo1aUOoh4CLPMyvxxi7EWOMgnCGsXXI1GIXlZUYX7ucU+kbR8NW8lh3O7cue0Pk32MKndfUxQFAwxdirk3fHappAnc0oqDPzDfGTBrCfHP04dM4oTV8cxr0SVzH9FF07xD3ib6xCDE+M+aUcVygtWzzbtGX2rPBrEUYfecfQkaFzYi6HjVnGBdtL7epqAlc1+jRdAap74RrnPc4BCijttY2tRcdN0g17w7HqZrXhdJTYAuS3hd8z+vKgK3V1zWPae0mZDMykadBn1hTQBLnZNwVrJpSe/NwEeDsEwCctEOsJTsgxLvCqUl2ACftEGvJDgjxrnBqkh3ASTvEWrIDQrwrnJpkB3DSDrGW7IAQ7wqnJtkBnLRztejXXVu4+mxz/nQ9jR1w5VB86ejLTFcnnDwhzV+F6T+CHZlx6THSjn76eyyBIOPHyDakhBAQAkJACAgBISAEhIAQYCLwC8JxpAmsEGt6AAAAAElFTkSuQmCC") no-repeat;
  height: 1rem;
  width: 1rem;
  display: block;
  background-size: 1rem;
  float: right;
}

.des {
  background-color: #f8f9fa!important;
}

.des:after {
  content: '';
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAmxJREFUeAHtmksrRVEUx72fH8CIGQNJkpGUUmakDEiZSJRIZsRQmCkTJRmZmJgQE0kpX0D5DJKJgff7v+ru2u3O3vvc67TOvsdatdrnnP1Y///v7HvvubdbUiIhBISAEBACQkAICAEhIAQ4CXSh2DnyDfmCPEG2Iv9F9MPlM/LHyAecdyMzHYNwR3fdNK/OH9HXl1UCozD24TCvILxizEDWIEzA0FcM8woCgRrJCoS5PIwrANQSMAJX1LEI9bqpQo4JYNFFKRSvIgsxHDVnqZgIkPnNBM0rIGtYk9YOOsqgbgepRCfdbmFtqhFkVEDVPjJp0+Z6e6hRHhqBKgg6ZDCvYBygVmUoEGoh5JTRvIJwhJo1aUOoh4CLPMyvxxi7EWOMgnCGsXXI1GIXlZUYX7ucU+kbR8NW8lh3O7cue0Pk32MKndfUxQFAwxdirk3fHappAnc0oqDPzDfGTBrCfHP04dM4oTV8cxr0SVzH9FF07xD3ib6xCDE+M+aUcVygtWzzbtGX2rPBrEUYfecfQkaFzYi6HjVnGBdtL7epqAlc1+jRdAap74RrnPc4BCijttY2tRcdN0g17w7HqZrXhdJTYAuS3hd8z+vKgK3V1zWPae0mZDMykadBn1hTQBLnZNwVrJpSe/NwEeDsEwCctEOsJTsgxLvCqUl2ACftEGvJDgjxrnBqkh3ASTvEWrIDQrwrnJpkB3DSDrGW7IAQ7wqnJtkBnLRztejXXVu4+mxz/nQ9jR1w5VB86ejLTFcnnDwhzV+F6T+CHZlx6THSjn76eyyBIOPHyDakhBAQAkJACAgBISAEhIAQYCLwC8JxpAmsEGt6AAAAAElFTkSuQmCC") no-repeat;
  height: 1rem;
  width: 1rem;
  display: block;
  background-size: 1rem;
  float: right;
}

.paperless-input-select {
  .ng-select {
    position: relative;
    flex: 1 1 auto;
    margin-bottom: 0;
    min-height: calc(1.5em + 0.75rem + 5px);
    line-height: 1.5;

    .ng-select-container .ng-value-container .ng-input {
      top: 7px;
    }

    .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
      background-color: var(--pngx-bg-darker) !important;
      color: var(--pngx-body-color-accent) !important;
    }

    .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
    .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked {
      background: none;
    }
  }

  .input-group {
    ng-select:not(:last-child) {
      .ng-select-container {
        height: 100%;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
}

.paperless-input-tags {
  .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
    background-color: transparent;
    border-color: transparent;
  }

  .ng-select.ng-select-multiple .ng-select-container .ng-value-container {
    padding-top: 1px;
  }
}

@supports (-webkit-touch-callout: none) {
  input[type="number"],
  input[type="search"],
  input[type="text"],
  select:focus,
  textarea {
    font-size: 16px;
  }
}

.form-control:not(.btn),
input,
select,
textarea,
.form-select:not(.is-invalid):not(:disabled),
.form-check-input,
.ng-select .ng-select-container .ng-value-container .ng-input > 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);
}

.form-control:disabled, .form-control[readonly] {
  background-color: var(--pngx-bg-alt);
  cursor: not-allowed;
}

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

  &:focus {
    color: var(--bs-body-color);
  }
}

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

    &.disabled, &:disabled {
      opacity: 50%;
    }
  }
}

.doc-img-container {
  border: none !important;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
  overflow: hidden;
}

// icons
.toolbaricon {
  width: 1.2em;
  height: 1.2em;
}

.buttonicon {
  width: 1.2em;
  height: 1.2em;
}

.sidebaricon {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}

.sidebaricon-sm {
  width: 12px;
  height: 12px;
}

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: hsla(var(--pngx-primary), var(--pngx-primary-lightness), .8);
  z-index: 1055; // $zindex-modal
  pointer-events: none !important;
  user-select: none !important;
  text-align: center;
  padding-top: 25%;

  h2 {
    color: var(--pngx-primary-text-contrast)
  }

  &.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-primary {
  --bs-alert-color: var(--bs-primary);
  --bs-alert-bg: var(--pngx-primary-faded);
  --bs-alert-border-color: var(--bs-primary);
}

.alert-danger {
  color: var(--bs-body-color);
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}

.progress {
  background-color: var(--bs-body-bg);

  .text-bg-primary {
    background-color: var(--bs-primary) !important;
  }
}

.ngb-dp-header,
.ngb-dp-weekdays,
.ngb-dp-month {
  background-color: var(--bs-body-bg);
}

.popover {
  background-color: var(--pngx-bg-alt);
  .popover-header {
    background-color: var(--pngx-bg-alt);
  }
  .popover-header,
  .popover-body {
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
  }
}

// Tour
.tour-active .popover {
  min-width: 360px;
  margin: 0 .25rem .25rem !important;
}

body.tour-active .row.sticky-top,
body.tour-active .sidebar {
  z-index: inherit !important;
}

.nav-item.touranchor--is-active a {
  font-weight: bold !important;
  color: var(--bs-primary);
}

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

// Bootstrap 5 tweaks
a.badge {
  text-decoration: none;
}

.btn-link {
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-group-xs {
  > .btn {
    padding: 0.2rem 0.25rem;
    font-size: 0.675rem;
    line-height: 1.2;
    border-radius: 0.15rem;
  }

  > .btn:not(:first-child):not(:nth-child(2)) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

code {
  color: var(--pngx-body-color-accent)
}

.accordion {
  --bs-accordion-btn-padding-x: 0.75rem;
  --bs-accordion-btn-padding-y: 0.375rem;
  --bs-accordion-btn-bg: var(--bs-light);
  --bs-accordion-btn-color: var(--bs-primary);
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-bg: var(--bs-light);
  --bs-accordion-active-color: var(--bs-primary);
  --bs-accordion-active-bg: var(--pngx-bg-alt);
}

.accordion-button::after {
  filter: invert(0.5) saturate(0);
}