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

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

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  xxxl: 2400px
);

$form-file-button-bg: var(--bs-body-bg);
$form-file-button-hover-bg: var(--pngx-bg-alt);

@import "node_modules/bootstrap/scss/bootstrap";
@import "theme";
@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;
}

@media(min-width: 768px) {
  .col-slim {
    padding-left: calc(50px + $grid-gutter-width) !important;
  }
}

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

.list-group-item .btn-link,
table .btn-link {
  font-size: 1em;
}

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

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

a.btn-link:hover,
a.btn-link:active,
a.btn-link:focus-visible,
.btn-link:hover,
.btn-link:active,
.btn-link:focus-visible {
  color: var(--pngx-primary-lighten-10) !important;
  .primary-light & {
    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(1em + 0.75rem + 5px);
    line-height: 1.5;

    .ng-select-container {
      border-radius: $border-radius;
    }

    .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 {
      font-weight: bold;
      background-color: var(--pngx-bg-alt2) !important;
    }

    &.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder,
    .ng-select-container .ng-value-container .ng-placeholder {
      top: 7px;
    }
  }

  .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);
  font-size: 0.875rem;

  &:focus {
    background-color: var(--pngx-bg-darker);
    color: var(--bs-body-color);
  }

  @media(max-width: 768px) {
    font-size: 1rem;
  }
}

@media(max-width: 768px) {
  .input-group-sm .btn-sm {
    // accommodate larger font size on mobile
    padding-top: .35rem;
    padding-bottom: .35rem;
  }
}

.input-group .form-control-sm {
  // accommodate larger font size on mobile
  padding-top: .15rem;
  padding-bottom: .15rem;
  min-height: calc(1.3em + 0.5rem + calc(var(--bs-border-width) * 2)) !important;
}

.input-group .btn-outline-secondary {
  border-color: var(--bs-border-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;
}

ul.pagination {
  margin-bottom: 0;
}

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

.nav-underline {
  .nav-link {
    &.active, &:hover, &:focus {
      color: var(--bs-primary);
    }
  }
}

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

table.table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: var(--bs-light-rgb);

  .des,.asc {
    background-color: var(--bs-body-bg) !important;
  }
}

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

.modal .btn-close {
  color: var(--bs-body-color);
}

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

.popover-hidden .popover {
    opacity: 0;
    pointer-events: none;
}

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

.tour-step {
  .popover-header {
    --bs-popover-header-padding-y: .75rem;
  }

  .popover-body {
    // reset ngx-ui-tour overrides
    padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x) !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-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);
}

.me-1px {
  margin-right: 1px !important;
}

.cdk-drag-placeholder {
  opacity: .5;
}

/* Animate items as they're being sorted. */
.cdk-drop-list-dragging .cdk-drag {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

/* Animate an item that has been dropped. */
.cdk-drag-animating {
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
}

.hidden-button-container {
  button {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  &:hover {
    button {
      opacity: 1;
      pointer-events: initial;
    }
  }
}