pull/1533/head
Cagatay Civici 2021-08-31 15:00:04 +03:00
parent 488cb9fdaa
commit b46ad4374e
40 changed files with 2196 additions and 758 deletions

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 1px #93cbf9; box-shadow: 0 0 0 1px #93cbf9;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 1px #93cbf9; box-shadow: 0 0 0 1px #93cbf9;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3737,10 +3759,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -3821,10 +3839,6 @@
padding: 1rem; padding: 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #383838; background: #383838;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -5061,12 +5075,46 @@
box-shadow: 0 0 0 1px #93cbf9; box-shadow: 0 0 0 1px #93cbf9;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5136,10 +5184,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #383838; background-color: #383838;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 1px #a7d8a9; box-shadow: 0 0 0 1px #a7d8a9;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 1px #a7d8a9; box-shadow: 0 0 0 1px #a7d8a9;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3737,10 +3759,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -3821,10 +3839,6 @@
padding: 1rem; padding: 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #383838; background: #383838;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -5061,12 +5075,46 @@
box-shadow: 0 0 0 1px #a7d8a9; box-shadow: 0 0 0 1px #a7d8a9;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5136,10 +5184,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #383838; background-color: #383838;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 1px #ffe284; box-shadow: 0 0 0 1px #ffe284;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 1px #ffe284; box-shadow: 0 0 0 1px #ffe284;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3737,10 +3759,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -3821,10 +3839,6 @@
padding: 1rem; padding: 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #383838; background: #383838;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -5061,12 +5075,46 @@
box-shadow: 0 0 0 1px #ffe284; box-shadow: 0 0 0 1px #ffe284;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5136,10 +5184,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #383838; background-color: #383838;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 1px #cf95d9; box-shadow: 0 0 0 1px #cf95d9;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 1px #cf95d9; box-shadow: 0 0 0 1px #cf95d9;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3737,10 +3759,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -3821,10 +3839,6 @@
padding: 1rem; padding: 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #383838; background: #383838;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -5061,12 +5075,46 @@
box-shadow: 0 0 0 1px #cf95d9; box-shadow: 0 0 0 1px #cf95d9;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5136,10 +5184,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #383838; background-color: #383838;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.15s; transition-duration: 0.15s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 1px #e3f3fe; box-shadow: 0 0 0 1px #e3f3fe;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f3f8ff; --blue-50:#f3f8ff;
--blue-100:#c5dcff; --blue-100:#c5dcff;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 1px #e3f3fe; box-shadow: 0 0 0 1px #e3f3fe;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3749,10 +3771,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #2a323d; background: #2a323d;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -3833,10 +3851,6 @@
padding: 1.25rem; padding: 1.25rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #3f4b5b; background: #3f4b5b;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -5073,12 +5087,46 @@
box-shadow: 0 0 0 1px #e3f3fe; box-shadow: 0 0 0 1px #e3f3fe;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: color 0.15s, box-shadow 0.15s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: color 0.15s, box-shadow 0.15s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5148,10 +5196,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #3f4b5b; background-color: #3f4b5b;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.15s; transition-duration: 0.15s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 1px #f0e6f5; box-shadow: 0 0 0 1px #f0e6f5;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f3f8ff; --blue-50:#f3f8ff;
--blue-100:#c5dcff; --blue-100:#c5dcff;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 1px #f0e6f5; box-shadow: 0 0 0 1px #f0e6f5;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3749,10 +3771,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #2a323d; background: #2a323d;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -3833,10 +3851,6 @@
padding: 1.25rem; padding: 1.25rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #3f4b5b; background: #3f4b5b;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -5073,12 +5087,46 @@
box-shadow: 0 0 0 1px #f0e6f5; box-shadow: 0 0 0 1px #f0e6f5;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: color 0.15s, box-shadow 0.15s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: color 0.15s, box-shadow 0.15s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5148,10 +5196,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #3f4b5b; background-color: #3f4b5b;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.15s; transition-duration: 0.15s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f3f8ff; --blue-50:#f3f8ff;
--blue-100:#c5dcff; --blue-100:#c5dcff;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3749,10 +3771,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #ffffff; background: #ffffff;
color: #212529; color: #212529;
@ -3833,10 +3851,6 @@
padding: 1.25rem; padding: 1.25rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #212529; background: #212529;
color: #ffffff; color: #ffffff;
@ -5073,12 +5087,46 @@
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: box-shadow 0.15s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: box-shadow 0.15s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5148,10 +5196,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #dee2e6; background-color: #dee2e6;
color: #212529; color: #212529;

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.15s; transition-duration: 0.15s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f3f8ff; --blue-50:#f3f8ff;
--blue-100:#c5dcff; --blue-100:#c5dcff;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3749,10 +3771,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #ffffff; background: #ffffff;
color: #212529; color: #212529;
@ -3833,10 +3851,6 @@
padding: 1.25rem; padding: 1.25rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #212529; background: #212529;
color: #ffffff; color: #ffffff;
@ -5073,12 +5087,46 @@
box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: box-shadow 0.15s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: box-shadow 0.15s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5148,10 +5196,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #dee2e6; background-color: #dee2e6;
color: #212529; color: #212529;

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: inset 0 0 0 1px #605e5c; box-shadow: inset 0 0 0 1px #605e5c;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f3f8fc; --blue-50:#f3f8fc;
--blue-100:#c6dcef; --blue-100:#c6dcef;
@ -455,10 +481,6 @@
box-shadow: inset 0 0 0 1px #605e5c; box-shadow: inset 0 0 0 1px #605e5c;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3712,10 +3734,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #ffffff; background: #ffffff;
color: #323130; color: #323130;
@ -3796,10 +3814,6 @@
padding: 1rem; padding: 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #ffffff; background: #ffffff;
color: #323130; color: #323130;
@ -5012,12 +5026,46 @@
box-shadow: inset 0 0 0 1px #605e5c; box-shadow: inset 0 0 0 1px #605e5c;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5087,10 +5135,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #edebe9; background-color: #edebe9;
color: #323130; color: #323130;

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 0.1rem white; box-shadow: 0 0 0 0.1rem white;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f3f8fc; --blue-50:#f3f8fc;
--blue-100:#c6dcef; --blue-100:#c6dcef;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 0.1rem white; box-shadow: 0 0 0 0.1rem white;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3724,10 +3746,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #323232; background: #323232;
color: #dedede; color: #dedede;
@ -3808,10 +3826,6 @@
padding: 0.571rem 1rem; padding: 0.571rem 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #4c4c4c; background: #4c4c4c;
color: #dedede; color: #dedede;
@ -5024,12 +5038,46 @@
box-shadow: 0 0 0 0.1rem white; box-shadow: 0 0 0 0.1rem white;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5099,10 +5147,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #4b4b4b; background-color: #4b4b4b;
color: #dedede; color: #dedede;

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 0.1rem white; box-shadow: 0 0 0 0.1rem white;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f3f8fc; --blue-50:#f3f8fc;
--blue-100:#c6dcef; --blue-100:#c6dcef;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 0.1rem white; box-shadow: 0 0 0 0.1rem white;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3724,10 +3746,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #323232; background: #323232;
color: #dedede; color: #dedede;
@ -3808,10 +3826,6 @@
padding: 0.571rem 1rem; padding: 0.571rem 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #4c4c4c; background: #4c4c4c;
color: #dedede; color: #dedede;
@ -5024,12 +5038,46 @@
box-shadow: 0 0 0 0.1rem white; box-shadow: 0 0 0 0.1rem white;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5099,10 +5147,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #4b4b4b; background-color: #4b4b4b;
color: #dedede; color: #dedede;

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 0.1rem white; box-shadow: 0 0 0 0.1rem white;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f3f8fc; --blue-50:#f3f8fc;
--blue-100:#c6dcef; --blue-100:#c6dcef;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 0.1rem white; box-shadow: 0 0 0 0.1rem white;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3724,10 +3746,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #323232; background: #323232;
color: #dedede; color: #dedede;
@ -3808,10 +3826,6 @@
padding: 0.571rem 1rem; padding: 0.571rem 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #4c4c4c; background: #4c4c4c;
color: #dedede; color: #dedede;
@ -5024,12 +5038,46 @@
box-shadow: 0 0 0 0.1rem white; box-shadow: 0 0 0 0.1rem white;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5099,10 +5147,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #4b4b4b; background-color: #4b4b4b;
color: #dedede; color: #dedede;

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 0.1rem white; box-shadow: 0 0 0 0.1rem white;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f3f8fc; --blue-50:#f3f8fc;
--blue-100:#c6dcef; --blue-100:#c6dcef;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 0.1rem white; box-shadow: 0 0 0 0.1rem white;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3724,10 +3746,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #323232; background: #323232;
color: #dedede; color: #dedede;
@ -3808,10 +3826,6 @@
padding: 0.571rem 1rem; padding: 0.571rem 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #4c4c4c; background: #4c4c4c;
color: #dedede; color: #dedede;
@ -5024,12 +5038,46 @@
box-shadow: 0 0 0 0.1rem white; box-shadow: 0 0 0 0.1rem white;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5099,10 +5147,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #4b4b4b; background-color: #4b4b4b;
color: #dedede; color: #dedede;

View File

@ -80,6 +80,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.32); background-color: rgba(0, 0, 0, 0.32);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.32);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -109,6 +110,31 @@
box-shadow: none; box-shadow: none;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -479,10 +505,6 @@
box-shadow: none; box-shadow: none;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3761,10 +3783,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.32);
}
.p-overlaypanel { .p-overlaypanel {
background: #262626; background: #262626;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -3845,10 +3863,6 @@
padding: 1rem; padding: 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #444444; background: #444444;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -5085,12 +5099,46 @@
box-shadow: none; box-shadow: none;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.32); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5160,10 +5208,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
.p-chip { .p-chip {
background-color: rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);

View File

@ -80,6 +80,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.32); background-color: rgba(0, 0, 0, 0.32);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.32);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -109,6 +110,31 @@
box-shadow: none; box-shadow: none;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -479,10 +505,6 @@
box-shadow: none; box-shadow: none;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3761,10 +3783,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.32);
}
.p-overlaypanel { .p-overlaypanel {
background: #262626; background: #262626;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -3845,10 +3863,6 @@
padding: 1rem; padding: 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #444444; background: #444444;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -5085,12 +5099,46 @@
box-shadow: none; box-shadow: none;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.32); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5160,10 +5208,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
.p-chip { .p-chip {
background-color: rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);

View File

@ -80,6 +80,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.32); background-color: rgba(0, 0, 0, 0.32);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.32);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -109,6 +110,31 @@
box-shadow: none; box-shadow: none;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -479,10 +505,6 @@
box-shadow: none; box-shadow: none;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3761,10 +3783,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.32);
}
.p-overlaypanel { .p-overlaypanel {
background: #ffffff; background: #ffffff;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
@ -3845,10 +3863,6 @@
padding: 1rem; padding: 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: rgba(97, 97, 97, 0.9); background: rgba(97, 97, 97, 0.9);
color: #ffffff; color: #ffffff;
@ -5085,12 +5099,46 @@
box-shadow: none; box-shadow: none;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.32); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5160,10 +5208,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
.p-chip { .p-chip {
background-color: rgba(0, 0, 0, 0.12); background-color: rgba(0, 0, 0, 0.12);
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);

View File

@ -80,6 +80,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.32); background-color: rgba(0, 0, 0, 0.32);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.32);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -109,6 +110,31 @@
box-shadow: none; box-shadow: none;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -479,10 +505,6 @@
box-shadow: none; box-shadow: none;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3761,10 +3783,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.32);
}
.p-overlaypanel { .p-overlaypanel {
background: #ffffff; background: #ffffff;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
@ -3845,10 +3863,6 @@
padding: 1rem; padding: 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: rgba(97, 97, 97, 0.9); background: rgba(97, 97, 97, 0.9);
color: #ffffff; color: #ffffff;
@ -5085,12 +5099,46 @@
box-shadow: none; box-shadow: none;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.32); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5160,10 +5208,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
.p-chip { .p-chip {
background-color: rgba(0, 0, 0, 0.12); background-color: rgba(0, 0, 0, 0.12);
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);

View File

@ -80,6 +80,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.32); background-color: rgba(0, 0, 0, 0.32);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.32);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -109,6 +110,31 @@
box-shadow: none; box-shadow: none;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -479,10 +505,6 @@
box-shadow: none; box-shadow: none;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3761,10 +3783,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.32);
}
.p-overlaypanel { .p-overlaypanel {
background: #262626; background: #262626;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -3845,10 +3863,6 @@
padding: 0.75rem; padding: 0.75rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #444444; background: #444444;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -5085,12 +5099,46 @@
box-shadow: none; box-shadow: none;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.32); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5160,10 +5208,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
.p-chip { .p-chip {
background-color: rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);

View File

@ -80,6 +80,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.32); background-color: rgba(0, 0, 0, 0.32);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.32);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -109,6 +110,31 @@
box-shadow: none; box-shadow: none;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -479,10 +505,6 @@
box-shadow: none; box-shadow: none;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3761,10 +3783,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.32);
}
.p-overlaypanel { .p-overlaypanel {
background: #262626; background: #262626;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -3845,10 +3863,6 @@
padding: 0.75rem; padding: 0.75rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #444444; background: #444444;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -5085,12 +5099,46 @@
box-shadow: none; box-shadow: none;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.32); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5160,10 +5208,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
.p-chip { .p-chip {
background-color: rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);

View File

@ -80,6 +80,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.32); background-color: rgba(0, 0, 0, 0.32);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.32);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -109,6 +110,31 @@
box-shadow: none; box-shadow: none;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -479,10 +505,6 @@
box-shadow: none; box-shadow: none;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3761,10 +3783,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.32);
}
.p-overlaypanel { .p-overlaypanel {
background: #ffffff; background: #ffffff;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
@ -3845,10 +3863,6 @@
padding: 0.75rem; padding: 0.75rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: rgba(97, 97, 97, 0.9); background: rgba(97, 97, 97, 0.9);
color: #ffffff; color: #ffffff;
@ -5085,12 +5099,46 @@
box-shadow: none; box-shadow: none;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.32); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5160,10 +5208,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
.p-chip { .p-chip {
background-color: rgba(0, 0, 0, 0.12); background-color: rgba(0, 0, 0, 0.12);
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);

View File

@ -80,6 +80,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.32); background-color: rgba(0, 0, 0, 0.32);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.32);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -109,6 +110,31 @@
box-shadow: none; box-shadow: none;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -479,10 +505,6 @@
box-shadow: none; box-shadow: none;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3761,10 +3783,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.32);
}
.p-overlaypanel { .p-overlaypanel {
background: #ffffff; background: #ffffff;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
@ -3845,10 +3863,6 @@
padding: 0.75rem; padding: 0.75rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: rgba(97, 97, 97, 0.9); background: rgba(97, 97, 97, 0.9);
color: #ffffff; color: #ffffff;
@ -5085,12 +5099,46 @@
box-shadow: none; box-shadow: none;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.32); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5160,10 +5208,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.32);
}
.p-chip { .p-chip {
background-color: rgba(0, 0, 0, 0.12); background-color: rgba(0, 0, 0, 0.12);
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 0.2rem #8dcdff; box-shadow: 0 0 0 0.2rem #8dcdff;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f3f8fc; --blue-50:#f3f8fc;
--blue-100:#c6dcef; --blue-100:#c6dcef;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 0.2rem #8dcdff; box-shadow: 0 0 0 0.2rem #8dcdff;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0.25rem; padding: 0.25rem;
@ -3712,10 +3734,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #ffffff; background: #ffffff;
color: #333333; color: #333333;
@ -3796,10 +3814,6 @@
padding: 0.571rem 1rem; padding: 0.571rem 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #333333; background: #333333;
color: #ffffff; color: #ffffff;
@ -5012,12 +5026,46 @@
box-shadow: 0 0 0 0.2rem #8dcdff; box-shadow: 0 0 0 0.2rem #8dcdff;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5087,10 +5135,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #c8c8c8; background-color: #c8c8c8;
color: #333333; color: #333333;

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 0.2rem #8dcdff; box-shadow: 0 0 0 0.2rem #8dcdff;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f3f8fc; --blue-50:#f3f8fc;
--blue-100:#c6dcef; --blue-100:#c6dcef;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 0.2rem #8dcdff; box-shadow: 0 0 0 0.2rem #8dcdff;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0.25rem; padding: 0.25rem;
@ -3724,10 +3746,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #ffffff; background: #ffffff;
color: #333333; color: #333333;
@ -3808,10 +3826,6 @@
padding: 0.571rem 1rem; padding: 0.571rem 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #333333; background: #333333;
color: #ffffff; color: #ffffff;
@ -5024,12 +5038,46 @@
box-shadow: 0 0 0 0.2rem #8dcdff; box-shadow: 0 0 0 0.2rem #8dcdff;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5099,10 +5147,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #c8c8c8; background-color: #c8c8c8;
color: #333333; color: #333333;

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 0.2rem #c2e9d8; box-shadow: 0 0 0 0.2rem #c2e9d8;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f3f8fc; --blue-50:#f3f8fc;
--blue-100:#c6dcef; --blue-100:#c6dcef;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 0.2rem #c2e9d8; box-shadow: 0 0 0 0.2rem #c2e9d8;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0.25rem; padding: 0.25rem;
@ -3724,10 +3746,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #ffffff; background: #ffffff;
color: #333333; color: #333333;
@ -3808,10 +3826,6 @@
padding: 0.571rem 1rem; padding: 0.571rem 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #333333; background: #333333;
color: #ffffff; color: #ffffff;
@ -5024,12 +5038,46 @@
box-shadow: 0 0 0 0.2rem #c2e9d8; box-shadow: 0 0 0 0.2rem #c2e9d8;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5099,10 +5147,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #c8c8c8; background-color: #c8c8c8;
color: #333333; color: #333333;

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 0.2rem #8dcdff; box-shadow: 0 0 0 0.2rem #8dcdff;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f3f8fc; --blue-50:#f3f8fc;
--blue-100:#c6dcef; --blue-100:#c6dcef;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 0.2rem #8dcdff; box-shadow: 0 0 0 0.2rem #8dcdff;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0.25rem; padding: 0.25rem;
@ -3724,10 +3746,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #ffffff; background: #ffffff;
color: #333333; color: #333333;
@ -3808,10 +3826,6 @@
padding: 0.571rem 1rem; padding: 0.571rem 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #333333; background: #333333;
color: #ffffff; color: #ffffff;
@ -5024,12 +5038,46 @@
box-shadow: 0 0 0 0.2rem #8dcdff; box-shadow: 0 0 0 0.2rem #8dcdff;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5099,10 +5147,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #c8c8c8; background-color: #c8c8c8;
color: #333333; color: #333333;

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 0.2rem #e4e9ec; box-shadow: 0 0 0 0.2rem #e4e9ec;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f6fbfe; --blue-50:#f6fbfe;
--blue-100:#d4edfb; --blue-100:#d4edfb;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 0.2rem #e4e9ec; box-shadow: 0 0 0 0.2rem #e4e9ec;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0.25rem; padding: 0.25rem;
@ -3712,10 +3734,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #ffffff; background: #ffffff;
color: #666666; color: #666666;
@ -3796,10 +3814,6 @@
padding: 0.571rem 1rem; padding: 0.571rem 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #AFD3C8; background: #AFD3C8;
color: #385048; color: #385048;
@ -5012,12 +5026,46 @@
box-shadow: 0 0 0 0.2rem #e4e9ec; box-shadow: 0 0 0 0.2rem #e4e9ec;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5087,10 +5135,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #dadada; background-color: #dadada;
color: #666666; color: #666666;

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 0.2rem #a6d5fa; box-shadow: 0 0 0 0.2rem #a6d5fa;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 0.2rem #a6d5fa; box-shadow: 0 0 0 0.2rem #a6d5fa;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3737,10 +3759,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #ffffff; background: #ffffff;
color: #495057; color: #495057;
@ -3821,10 +3839,6 @@
padding: 1rem; padding: 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #495057; background: #495057;
color: #ffffff; color: #ffffff;
@ -5061,12 +5075,46 @@
box-shadow: 0 0 0 0.2rem #a6d5fa; box-shadow: 0 0 0 0.2rem #a6d5fa;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5136,10 +5184,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #dee2e6; background-color: #dee2e6;
color: #495057; color: #495057;

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 0.2rem #b7e0b8; box-shadow: 0 0 0 0.2rem #b7e0b8;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 0.2rem #b7e0b8; box-shadow: 0 0 0 0.2rem #b7e0b8;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3737,10 +3759,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #ffffff; background: #ffffff;
color: #495057; color: #495057;
@ -3821,10 +3839,6 @@
padding: 1rem; padding: 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #495057; background: #495057;
color: #ffffff; color: #ffffff;
@ -5061,12 +5075,46 @@
box-shadow: 0 0 0 0.2rem #b7e0b8; box-shadow: 0 0 0 0.2rem #b7e0b8;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5136,10 +5184,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #dee2e6; background-color: #dee2e6;
color: #495057; color: #495057;

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 0.2rem #ffe69c; box-shadow: 0 0 0 0.2rem #ffe69c;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 0.2rem #ffe69c; box-shadow: 0 0 0 0.2rem #ffe69c;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3737,10 +3759,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #ffffff; background: #ffffff;
color: #495057; color: #495057;
@ -3821,10 +3839,6 @@
padding: 1rem; padding: 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #495057; background: #495057;
color: #ffffff; color: #ffffff;
@ -5061,12 +5075,46 @@
box-shadow: 0 0 0 0.2rem #ffe69c; box-shadow: 0 0 0 0.2rem #ffe69c;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5136,10 +5184,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #dee2e6; background-color: #dee2e6;
color: #495057; color: #495057;

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 0.2rem #df9eea; box-shadow: 0 0 0 0.2rem #df9eea;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 0.2rem #df9eea; box-shadow: 0 0 0 0.2rem #df9eea;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3737,10 +3759,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #ffffff; background: #ffffff;
color: #495057; color: #495057;
@ -3821,10 +3839,6 @@
padding: 1rem; padding: 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #495057; background: #495057;
color: #ffffff; color: #ffffff;
@ -5061,12 +5075,46 @@
box-shadow: 0 0 0 0.2rem #df9eea; box-shadow: 0 0 0 0.2rem #df9eea;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5136,10 +5184,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #dee2e6; background-color: #dee2e6;
color: #495057; color: #495057;

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 1px #93cbf9; box-shadow: 0 0 0 1px #93cbf9;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 1px #93cbf9; box-shadow: 0 0 0 1px #93cbf9;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3737,10 +3759,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -3821,10 +3839,6 @@
padding: 1rem; padding: 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #304562; background: #304562;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -5061,12 +5075,46 @@
box-shadow: 0 0 0 1px #93cbf9; box-shadow: 0 0 0 1px #93cbf9;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5136,10 +5184,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #304562; background-color: #304562;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 1px #a7d8a9; box-shadow: 0 0 0 1px #a7d8a9;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 1px #a7d8a9; box-shadow: 0 0 0 1px #a7d8a9;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3737,10 +3759,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -3821,10 +3839,6 @@
padding: 1rem; padding: 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #304562; background: #304562;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -5061,12 +5075,46 @@
box-shadow: 0 0 0 1px #a7d8a9; box-shadow: 0 0 0 1px #a7d8a9;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5136,10 +5184,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #304562; background-color: #304562;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 1px #ffe284; box-shadow: 0 0 0 1px #ffe284;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 1px #ffe284; box-shadow: 0 0 0 1px #ffe284;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3737,10 +3759,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -3821,10 +3839,6 @@
padding: 1rem; padding: 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #304562; background: #304562;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -5061,12 +5075,46 @@
box-shadow: 0 0 0 1px #ffe284; box-shadow: 0 0 0 1px #ffe284;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5136,10 +5184,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #304562; background-color: #304562;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);

View File

@ -56,6 +56,7 @@
.p-component-overlay { .p-component-overlay {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
transition-duration: 0.2s; transition-duration: 0.2s;
--maskbg: rgba(0, 0, 0, 0.4);
} }
.p-disabled, .p-component:disabled { .p-disabled, .p-component:disabled {
@ -85,6 +86,31 @@
box-shadow: 0 0 0 1px #cf95d9; box-shadow: 0 0 0 1px #cf95d9;
} }
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: var(--maskbg);
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: var(--maskbg);
}
to {
background-color: transparent;
}
}
:root { :root {
--blue-50:#f4fafe; --blue-50:#f4fafe;
--blue-100:#cae6fc; --blue-100:#cae6fc;
@ -455,10 +481,6 @@
box-shadow: 0 0 0 1px #cf95d9; box-shadow: 0 0 0 1px #cf95d9;
} }
.p-datepicker-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td { .p-datepicker table th, .p-datepicker table td {
padding: 0; padding: 0;
@ -3737,10 +3759,6 @@
margin-left: 1rem; margin-left: 1rem;
} }
.p-dialog-mask.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
}
.p-overlaypanel { .p-overlaypanel {
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -3821,10 +3839,6 @@
padding: 1rem; padding: 1rem;
} }
.p-sidebar-mask.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-tooltip .p-tooltip-text { .p-tooltip .p-tooltip-text {
background: #304562; background: #304562;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
@ -5061,12 +5075,46 @@
box-shadow: 0 0 0 1px #cf95d9; box-shadow: 0 0 0 1px #cf95d9;
} }
.p-galleria-mask.p-component-overlay { .p-galleria-mask {
background-color: rgba(0, 0, 0, 0.9); --maskbg: rgba(0, 0, 0, 0.9);
} }
.p-image-mask.p-component-overlay { .p-image-mask {
background: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.9);
}
.p-image-preview-indicator {
background-color: transparent;
color: #f8f9fa;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
background-color: rgba(0, 0, 0, 0.5);
}
.p-image-toolbar {
padding: 1rem;
}
.p-image-action.p-link {
color: #f8f9fa;
background-color: transparent;
width: 3rem;
height: 3rem;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
margin-right: 0.5rem;
}
.p-image-action.p-link:last-child {
margin-right: 0;
}
.p-image-action.p-link:hover {
color: #f8f9fa;
background-color: rgba(255, 255, 255, 0.1);
}
.p-image-action.p-link i {
font-size: 1.5rem;
} }
.p-avatar { .p-avatar {
@ -5136,10 +5184,6 @@
line-height: 3rem; line-height: 3rem;
} }
.p-blockui.p-component-overlay {
background: rgba(0, 0, 0, 0.4);
}
.p-chip { .p-chip {
background-color: #304562; background-color: #304562;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);

View File

@ -44,25 +44,21 @@ export default {
}, },
methods: { methods: {
block() { block() {
let styleClass = 'p-blockui p-component-overlay p-component-overlay-enter';
if (this.fullScreen) { if (this.fullScreen) {
styleClass += ' p-blockui-document';
this.mask = document.createElement('div'); this.mask = document.createElement('div');
this.mask.setAttribute('class', 'p-blockui p-blockui-document'); this.mask.setAttribute('class', styleClass);
document.body.appendChild(this.mask); document.body.appendChild(this.mask);
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.addClass(document.body, 'p-overflow-hidden');
document.activeElement.blur(); document.activeElement.blur();
} }
else { else {
this.mask = document.createElement('div'); this.mask = document.createElement('div');
this.mask.setAttribute('class', 'p-blockui'); this.mask.setAttribute('class', styleClass);
this.$refs.container.appendChild(this.mask); this.$refs.container.appendChild(this.mask);
} }
if (this.mask) {
setTimeout(() => {
DomHandler.addClass(this.mask, 'p-component-overlay');
}, 1);
}
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndexUtils.set('modal', this.mask, this.baseZIndex + this.$primevue.config.zIndex.modal); ZIndexUtils.set('modal', this.mask, this.baseZIndex + this.$primevue.config.zIndex.modal);
} }
@ -70,7 +66,7 @@ export default {
this.$emit('block'); this.$emit('block');
}, },
unblock() { unblock() {
DomHandler.addClass(this.mask, 'p-blockui-leave'); DomHandler.addClass(this.mask, 'p-component-overlay-leave');
this.mask.addEventListener('transitionend', () => { this.mask.addEventListener('transitionend', () => {
this.removeMask(); this.removeMask();
}); });
@ -102,8 +98,6 @@ export default {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: transparent;
transition-property: background-color;
} }
.p-blockui.p-component-overlay { .p-blockui.p-component-overlay {
@ -113,8 +107,4 @@ export default {
.p-blockui-document.p-component-overlay { .p-blockui-document.p-component-overlay {
position: fixed; position: fixed;
} }
.p-blockui.p-blockui-leave.p-component-overlay {
background-color: transparent;
}
</style> </style>

View File

@ -1291,7 +1291,7 @@ export default {
if (!this.mask) { if (!this.mask) {
this.mask = document.createElement('div'); this.mask = document.createElement('div');
this.mask.style.zIndex = String(parseInt(this.overlay.style.zIndex, 10) - 1); this.mask.style.zIndex = String(parseInt(this.overlay.style.zIndex, 10) - 1);
DomHandler.addMultipleClasses(this.mask, 'p-datepicker-mask p-datepicker-mask-scrollblocker'); DomHandler.addMultipleClasses(this.mask, 'p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay p-component-overlay-enter');
this.maskClickListener = () => { this.maskClickListener = () => {
this.overlayVisible = false; this.overlayVisible = false;
@ -1300,16 +1300,12 @@ export default {
document.body.appendChild(this.mask); document.body.appendChild(this.mask);
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.addClass(document.body, 'p-overflow-hidden');
setTimeout(() => {
DomHandler.addClass(this.mask, 'p-component-overlay');
}, 1);
} }
}, },
disableModality() { disableModality() {
if (this.mask) { if (this.mask) {
DomHandler.addClass(this.mask, 'p-datepicker-mask-leave'); DomHandler.addClass(this.mask, 'p-component-overlay-leave');
this.mask.addEventListener('transitionend', () => { this.mask.addEventListener('animationend', () => {
this.destroyMask(); this.destroyMask();
}); });
} }
@ -2332,13 +2328,4 @@ export default {
min-width: 80vw; min-width: 80vw;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.p-datepicker-mask {
background-color: transparent;
transition-property: background-color;
}
.p-datepicker-mask.p-datepicker-mask-leave.p-component-overlay {
background-color: transparent;
}
</style> </style>

View File

@ -156,7 +156,7 @@ export default {
this.bindGlobalListeners(); this.bindGlobalListeners();
}, },
onBeforeLeave() { onBeforeLeave() {
DomHandler.addClass(this.mask, 'p-dialog-mask-leave'); DomHandler.addClass(this.mask, 'p-component-overlay-leave');
}, },
onLeave() { onLeave() {
@ -376,7 +376,7 @@ export default {
}, },
computed: { computed: {
maskClass() { maskClass() {
return ['p-dialog-mask', {'p-component-overlay': this.modal}, this.getPositionClass()]; return ['p-dialog-mask', {'p-component-overlay p-component-overlay-enter': this.modal}, this.getPositionClass()];
}, },
dialogClass() { dialogClass() {
return ['p-dialog p-component', { return ['p-dialog p-component', {
@ -427,8 +427,6 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
pointer-events: none; pointer-events: none;
background-color: transparent;
transition-property: background-color;
} }
.p-dialog-mask.p-component-overlay { .p-dialog-mask.p-component-overlay {
@ -490,10 +488,6 @@ export default {
transform: scale(0.7); transform: scale(0.7);
} }
.p-dialog-mask.p-dialog-mask-leave {
background-color: transparent;
}
/* Top, Bottom, Left, Right, Top* and Bottom* */ /* Top, Bottom, Left, Right, Top* and Bottom* */
.p-dialog-top .p-dialog, .p-dialog-top .p-dialog,
.p-dialog-bottom .p-dialog, .p-dialog-bottom .p-dialog,

View File

@ -147,7 +147,7 @@ export default {
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.addClass(document.body, 'p-overflow-hidden');
}, },
onBeforeLeave() { onBeforeLeave() {
DomHandler.addClass(this.mask, 'p-galleria-mask-leave'); DomHandler.addClass(this.mask, 'p-component-overlay-leave');
}, },
onAfterLeave(el) { onAfterLeave(el) {
ZIndexUtils.clear(el); ZIndexUtils.clear(el);
@ -171,7 +171,7 @@ export default {
}, },
computed: { computed: {
maskContentClass() { maskContentClass() {
return ['p-galleria-mask p-component-overlay', this.maskClass, { return ['p-galleria-mask p-component-overlay p-component-overlay-enter', this.maskClass, {
'p-input-filled': this.$primevue.config.inputStyle === 'filled', 'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.config.ripple === false 'p-ripple-disabled': this.$primevue.config.ripple === false
}]; }];
@ -420,8 +420,6 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: transparent;
transition-property: background-color;
} }
.p-galleria-close { .p-galleria-close {
@ -459,10 +457,6 @@ export default {
opacity: 0; opacity: 0;
} }
.p-galleria-mask.p-galleria-mask-leave {
background-color: transparent;
}
/* Keyboard Support */ /* Keyboard Support */
.p-items-hidden .p-galleria-thumbnail-item { .p-items-hidden .p-galleria-thumbnail-item {
visibility: hidden; visibility: hidden;

View File

@ -110,13 +110,12 @@ export default {
}, },
onBeforeEnter() { onBeforeEnter() {
ZIndexUtils.set('modal', this.mask, this.$primevue.config.zIndex.modal); ZIndexUtils.set('modal', this.mask, this.$primevue.config.zIndex.modal);
DomHandler.addClass(this.mask, 'p-component-overlay');
}, },
onEnter() { onEnter() {
this.$emit('show'); this.$emit('show');
}, },
onBeforeLeave() { onBeforeLeave() {
DomHandler.addClass(this.mask, 'p-image-mask-leave'); DomHandler.addClass(this.mask, 'p-component-overlay-leave');
}, },
onLeave() { onLeave() {
this.$emit('hide'); this.$emit('hide');
@ -133,7 +132,7 @@ export default {
}]; }];
}, },
maskClass() { maskClass() {
return ['p-image-mask']; return ['p-image-mask p-component-overlay p-component-overlay-enter'];
}, },
rotateClass() { rotateClass() {
return 'p-image-preview-rotate-' + this.rotate; return 'p-image-preview-rotate-' + this.rotate;
@ -153,12 +152,6 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: transparent;
transition-property: background-color;
}
.p-image-mask.p-component-overlay.p-image-mask-leave {
background-color: transparent;
} }
.p-image-preview-container { .p-image-preview-container {
@ -176,9 +169,7 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0; opacity: 0;
background-color: rgba(0,0,0,.5);
transition: opacity .3s; transition: opacity .3s;
color: #ffffff;
} }
.p-image-preview-icon { .p-image-preview-icon {
@ -202,10 +193,9 @@ export default {
} }
.p-image-action.p-link { .p-image-action.p-link {
padding: 1rem; display: flex;
color: #ffffff; justify-content: center;
margin-right: .5rem; align-items: center;
display: block;
} }
.p-image-preview { .p-image-preview {

View File

@ -104,23 +104,19 @@ export default {
enableModality() { enableModality() {
if (!this.mask) { if (!this.mask) {
this.mask = document.createElement('div'); this.mask = document.createElement('div');
this.mask.setAttribute('class', 'p-sidebar-mask'); this.mask.setAttribute('class', 'p-sidebar-mask p-component-overlay p-component-overlay-enter');
this.mask.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1); this.mask.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1);
if (this.dismissable) { if (this.dismissable) {
this.bindMaskClickListener(); this.bindMaskClickListener();
} }
document.body.appendChild(this.mask); document.body.appendChild(this.mask);
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.addClass(document.body, 'p-overflow-hidden');
setTimeout(() => {
DomHandler.addClass(this.mask, 'p-component-overlay');
}, 1);
} }
}, },
disableModality() { disableModality() {
if (this.mask) { if (this.mask) {
DomHandler.addClass(this.mask, 'p-sidebar-mask-leave'); DomHandler.addClass(this.mask, 'p-component-overlay-leave');
this.mask.addEventListener('transitionend', () => { this.mask.addEventListener('animationend', () => {
this.destroyModal(); this.destroyModal();
}); });
} }
@ -194,15 +190,6 @@ export default {
justify-content: center; justify-content: center;
} }
.p-sidebar-mask {
background-color: transparent;
transition-property: background-color;
}
.p-sidebar-mask.p-sidebar-mask-leave.p-component-overlay {
background-color: transparent;
}
.p-sidebar-left { .p-sidebar-left {
top: 0; top: 0;
left: 0; left: 0;