mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2025-04-02 13:45:10 -05:00
fix scss organization
[ci skip]
This commit is contained in:
Michael Shamoon
parent
b5a75be1db
commit
99d0a0845d
@ -35,20 +35,19 @@
|
||||
|
||||
.sidebar .nav-link {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sidebar .nav-link .sidebaricon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
&:hover, &.active {
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.sidebar .nav-link.active {
|
||||
color: var(--bs-primary);
|
||||
font-weight: bold;
|
||||
}
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sidebar .nav-link.active .sidebaricon,
|
||||
.sidebar .nav-link:hover .sidebaricon {
|
||||
color: inherit;
|
||||
.sidebaricon {
|
||||
margin-right: 4px;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user