mirror of
https://github.com/idrainformatica/Linfa.git
synced 2026-04-18 19:53:39 +02:00
v1
This commit is contained in:
801
src-ui/src/styles.scss
Normal file
801
src-ui/src/styles.scss
Normal file
@@ -0,0 +1,801 @@
|
||||
@use "sass:meta";
|
||||
// bs variables
|
||||
$grid-gutter-width: 1.5rem;
|
||||
$border-radius: .375rem;
|
||||
$btn-border-width: var(--bs-border-width);
|
||||
|
||||
$form-file-button-bg: var(--bs-body-bg);
|
||||
$form-file-button-hover-bg: var(--pngx-bg-alt);
|
||||
|
||||
@import "node_modules/bootstrap/dist/css/bootstrap.css";
|
||||
@include meta.load-css("theme");
|
||||
@import "@ng-select/ng-select/themes/default.theme.css";
|
||||
@include meta.load-css("print");
|
||||
|
||||
// re-created bootstrap styles
|
||||
.mt-n2 {
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
.me-n2 {
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
.me-n3 {
|
||||
margin-right: -1rem;
|
||||
}
|
||||
.mb-n2 {
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
.ms-n1 {
|
||||
margin-left: -0.25rem;
|
||||
}
|
||||
.ms-n2 {
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
.my-n2 {
|
||||
margin-top: -0.5rem;
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
xxl: 1400px,
|
||||
xxxl: 2400px
|
||||
);
|
||||
|
||||
:root {
|
||||
@each $name, $value in $grid-breakpoints {
|
||||
--bs-breakpoint-#{$name}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2400px) {
|
||||
.col-xxxl-1 {
|
||||
flex: 0 0 auto;
|
||||
width: 8.33333333%;
|
||||
}
|
||||
.col-xxxl-11 {
|
||||
flex: 0 0 auto;
|
||||
width:91.66666667%
|
||||
}
|
||||
}
|
||||
|
||||
// Paperless-ngx styles
|
||||
body {
|
||||
--pngx-body-font-size: 0.875rem;
|
||||
font-size: var(--pngx-body-font-size);
|
||||
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;
|
||||
|
||||
input {
|
||||
min-width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.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-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
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;
|
||||
overflow: hidden;
|
||||
|
||||
.doc-img {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.card-selected {
|
||||
border-color:var(--bs-primary);
|
||||
|
||||
.document-card-check {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.doc-img-container {
|
||||
background-color: var(--pngx-primary-faded);
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
.toast {
|
||||
--bs-toast-max-width: var(--pngx-toast-max-width);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.accordion-button {
|
||||
font-size: var(--pngx-body-font-size);
|
||||
}
|
||||
|
||||
.me-1px {
|
||||
margin-right: 1px !important;
|
||||
}
|
||||
|
||||
.cdk-drag-placeholder {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.whitespace-preserve {
|
||||
white-space: preserve;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// pdfjs
|
||||
canvas.hiddenCanvasElement {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
// bs icons
|
||||
.btn-sm i-bs svg {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.document-card {
|
||||
overflow: hidden;
|
||||
|
||||
.card-footer i-bs svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
// fixes for buttons in preview popup
|
||||
.btn-group pngx-preview-popup:not(:last-child) {
|
||||
// Prevent double borders when buttons are next to each other
|
||||
> .btn {
|
||||
margin-left: calc(#{$btn-border-width} * -1);
|
||||
}
|
||||
> .btn {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
.btn-group pngx-preview-popup:not(:first-child) {
|
||||
> .btn {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
.btn-group pngx-preview-popup {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
|
||||
> .btn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user