mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2026-10-22 23:58:55 +00:00
107 lines
2.6 KiB
SCSS
107 lines
2.6 KiB
SCSS
::ng-deep .toast-body {
|
|
position: relative;
|
|
}
|
|
|
|
.toast {
|
|
--pngx-toast-accent: var(--pngx-toast-info);
|
|
background-color: var(--pngx-toast-bg);
|
|
color: var(--bs-body-color);
|
|
overflow: hidden;
|
|
|
|
&.toast-success {
|
|
--pngx-toast-accent: var(--pngx-toast-success);
|
|
background-color: var(--pngx-toast-success-bg);
|
|
border-color: color-mix(in srgb, var(--pngx-toast-success) 30%, transparent);
|
|
}
|
|
|
|
&.toast-error {
|
|
--pngx-toast-accent: var(--pngx-toast-error);
|
|
background-color: var(--pngx-toast-error-bg);
|
|
border-color: color-mix(in srgb, var(--pngx-toast-error) 35%, transparent);
|
|
}
|
|
}
|
|
|
|
.toast-icon {
|
|
color: var(--pngx-toast-accent);
|
|
}
|
|
|
|
.toast-content {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.toast .btn-close {
|
|
font-size: .6rem;
|
|
margin-top: .3rem;
|
|
margin-left: .75rem !important;
|
|
opacity: .45;
|
|
}
|
|
|
|
.toast:hover .btn-close {
|
|
opacity: .85;
|
|
}
|
|
|
|
// compact rows in the notifications dropdown
|
|
.toast.toast-list-item {
|
|
width: 100%;
|
|
max-width: none;
|
|
background-color: var(--pngx-toast-row-bg);
|
|
border: 0;
|
|
box-shadow: none;
|
|
|
|
&:hover {
|
|
background-color: var(--pngx-toast-row-hover-bg);
|
|
}
|
|
|
|
&.toast-error {
|
|
background-color: var(--pngx-toast-error-bg);
|
|
}
|
|
|
|
::ng-deep .toast-body {
|
|
padding: .625rem .75rem;
|
|
}
|
|
|
|
.toast-time {
|
|
margin-top: .1rem;
|
|
}
|
|
|
|
// marks notifications that arrived since the dropdown was last opened
|
|
&.toast-new .toast-time::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: .45rem;
|
|
height: .45rem;
|
|
margin-right: .4rem;
|
|
vertical-align: .05rem;
|
|
border-radius: 50%;
|
|
background-color: var(--pngx-toast-info);
|
|
}
|
|
}
|
|
|
|
.toast-action {
|
|
--bs-btn-padding-y: .1rem;
|
|
--bs-btn-padding-x: .6rem;
|
|
--bs-btn-font-size: .8rem;
|
|
--bs-btn-font-weight: 600;
|
|
--bs-btn-color: var(--pngx-toast-accent);
|
|
--bs-btn-bg: color-mix(in srgb, var(--pngx-toast-accent) 14%, transparent);
|
|
--bs-btn-border-color: transparent;
|
|
--bs-btn-hover-color: var(--pngx-toast-accent);
|
|
--bs-btn-hover-bg: color-mix(in srgb, var(--pngx-toast-accent) 24%, transparent);
|
|
--bs-btn-hover-border-color: transparent;
|
|
--bs-btn-active-color: var(--pngx-toast-accent);
|
|
--bs-btn-active-bg: color-mix(in srgb, var(--pngx-toast-accent) 30%, transparent);
|
|
--bs-btn-active-border-color: transparent;
|
|
}
|
|
|
|
// countdown thin line
|
|
.progress {
|
|
height: 2px;
|
|
background-color: transparent;
|
|
|
|
::ng-deep .progress-bar {
|
|
background-color: var(--bs-secondary-color);
|
|
opacity: .5;
|
|
}
|
|
}
|