From c6f275d00ec61ccdff8de0adfbda39a4b47cadca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 28 Feb 2024 15:35:49 +0300 Subject: [PATCH] Sync theme --- .../components/themes/arya-blue/theme.css | 670 ++++++---- .../components/themes/arya-green/theme.css | 670 ++++++---- .../components/themes/arya-orange/theme.css | 670 ++++++---- .../components/themes/arya-purple/theme.css | 670 ++++++---- .../themes/bootstrap4-dark-blue/theme.css | 671 ++++++---- .../themes/bootstrap4-dark-purple/theme.css | 671 ++++++---- .../themes/bootstrap4-light-blue/theme.css | 671 ++++++---- .../themes/bootstrap4-light-purple/theme.css | 671 ++++++---- .../components/themes/fluent-light/theme.css | 708 ++++++---- .../themes/lara-dark-blue/theme.css | 688 ++++++---- .../themes/lara-dark-indigo/theme.css | 688 ++++++---- .../themes/lara-dark-purple/theme.css | 688 ++++++---- .../themes/lara-dark-teal/theme.css | 688 ++++++---- .../themes/lara-light-blue/theme.css | 701 ++++++---- .../themes/lara-light-indigo/theme.css | 701 ++++++---- .../themes/lara-light-purple/theme.css | 701 ++++++---- .../themes/lara-light-teal/theme.css | 701 ++++++---- .../components/themes/luna-amber/theme.css | 697 ++++++---- .../components/themes/luna-blue/theme.css | 697 ++++++---- .../components/themes/luna-green/theme.css | 697 ++++++---- .../components/themes/luna-pink/theme.css | 697 ++++++---- .../themes/md-dark-deeppurple/theme.css | 1149 +++++++++++------ .../themes/md-dark-indigo/theme.css | 1149 +++++++++++------ .../themes/md-light-deeppurple/theme.css | 871 +++++++++---- .../themes/md-light-indigo/theme.css | 871 +++++++++---- .../themes/mdc-dark-deeppurple/theme.css | 1149 +++++++++++------ .../themes/mdc-dark-indigo/theme.css | 1149 +++++++++++------ .../themes/mdc-light-deeppurple/theme.css | 871 +++++++++---- .../themes/mdc-light-indigo/theme.css | 871 +++++++++---- src/assets/components/themes/mira/theme.css | 715 ++++++---- src/assets/components/themes/nano/theme.css | 668 ++++++---- .../components/themes/nova-accent/theme.css | 669 ++++++---- .../components/themes/nova-alt/theme.css | 672 ++++++---- src/assets/components/themes/nova/theme.css | 672 ++++++---- src/assets/components/themes/rhea/theme.css | 669 ++++++---- .../components/themes/saga-blue/theme.css | 670 ++++++---- .../components/themes/saga-green/theme.css | 670 ++++++---- .../components/themes/saga-orange/theme.css | 670 ++++++---- .../components/themes/saga-purple/theme.css | 670 ++++++---- .../components/themes/soho-dark/theme.css | 735 +++++++---- .../components/themes/soho-light/theme.css | 685 ++++++---- .../themes/tailwind-light/theme.css | 743 +++++++---- .../components/themes/vela-blue/theme.css | 670 ++++++---- .../components/themes/vela-green/theme.css | 670 ++++++---- .../components/themes/vela-orange/theme.css | 670 ++++++---- .../components/themes/vela-purple/theme.css | 670 ++++++---- .../components/themes/viva-dark/theme.css | 701 ++++++---- .../components/themes/viva-light/theme.css | 701 ++++++---- 48 files changed, 23238 insertions(+), 12248 deletions(-) diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css index cf5255846bf..61aadd4813f 100644 --- a/src/assets/components/themes/arya-blue/theme.css +++ b/src/assets/components/themes/arya-blue/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #ef9a9a; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-autocomplete-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -427,9 +440,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ef9a9a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -437,19 +452,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; border-color: #64B5F6; } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -476,7 +495,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -486,13 +505,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #64B5F6; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -664,10 +684,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #383838; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #383838; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -768,6 +794,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #2396f2; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } @@ -831,12 +861,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #2396f2; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #64B5F6; } @@ -875,9 +908,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ef9a9a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -885,22 +920,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1e1e1e; border: 1px solid #383838; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #121212; border: 1px solid #383838; @@ -944,6 +983,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1007,6 +1047,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #383838; } @@ -1019,9 +1060,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ef9a9a; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1034,60 +1083,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #383838; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1095,9 +1162,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1105,12 +1174,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1149,9 +1220,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #43a5f4; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1184,45 +1257,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ef9a9a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #383838; } @@ -1232,14 +1317,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #383838; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1314,9 +1402,11 @@ box-shadow: 0 0 0 1px #93cbf9; border-color: #64B5F6; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ef9a9a; } + .p-multiselect { background: #121212; border: 1px solid #383838; @@ -1356,9 +1446,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1366,6 +1458,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1454,6 +1547,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #383838; } @@ -1463,12 +1557,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #383838; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ef9a9a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ef9a9a; } + .p-password-panel { padding: 1rem; background: #1e1e1e; @@ -1490,6 +1587,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1497,6 +1595,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1504,6 +1603,7 @@ color: rgba(255, 255, 255, 0.6); right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1541,9 +1641,11 @@ background: #2396f2; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #383838; } @@ -1556,9 +1658,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #2396f2; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1589,6 +1693,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1e1e1e; border: 1px solid #383838; @@ -1596,7 +1701,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1605,7 +1710,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1614,7 +1719,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1623,12 +1728,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ef9a9a; } + .p-slider { background: #383838; border: 0 none; @@ -1680,6 +1787,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1e1e1e; border: 1px solid #383838; @@ -1687,7 +1795,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1696,7 +1804,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1705,7 +1813,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1714,12 +1822,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ef9a9a; } + .p-treeselect { background: #121212; border: 1px solid #383838; @@ -1756,12 +1866,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1821,6 +1934,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #383838; } @@ -1830,6 +1944,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #383838; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1837,6 +1952,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #212529; background: #64B5F6; @@ -1948,7 +2064,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1975,426 +2091,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909c; border: 1px solid #78909c; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #121212; background: #ffe082; border: 1px solid #ffe082; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; } + .p-button.p-button-link { color: #64B5F6; background: transparent; @@ -2418,6 +2542,7 @@ color: #64B5F6; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2429,14 +2554,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2447,45 +2575,52 @@ background: rgba(255, 255, 255, 0.6); color: #121212; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2563,6 +2698,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #78909c; @@ -2591,6 +2727,7 @@ border-color: transparent; color: #78909c; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #81d4fa; @@ -2619,6 +2756,7 @@ border-color: transparent; color: #81d4fa; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2647,6 +2785,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2675,6 +2814,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2703,6 +2843,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f48fb1; @@ -2731,8 +2872,9 @@ border-color: transparent; color: #f48fb1; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2743,13 +2885,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -2775,6 +2917,7 @@ background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2868,9 +3011,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2880,17 +3023,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -2920,12 +3063,12 @@ background: #64B5F6; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1e1e1e; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1e1e1e; } .p-datatable .p-datatable-loading-icon { @@ -3028,6 +3171,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3066,10 +3210,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3097,6 +3243,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3116,6 +3263,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-column-filter-overlay { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3153,6 +3301,7 @@ border-top: 1px solid #383838; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3181,6 +3330,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3266,6 +3416,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3274,6 +3425,7 @@ background: #1e1e1e; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3312,6 +3464,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3321,9 +3474,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3334,9 +3487,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3393,6 +3546,7 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3478,6 +3632,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3486,6 +3641,7 @@ background: #1e1e1e; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #64B5F6; border-radius: 50%; @@ -3497,19 +3653,20 @@ background-color: #383838; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #383838; background: #1e1e1e; @@ -3566,11 +3723,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3643,6 +3800,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3782,7 +3940,7 @@ background: #64B5F6; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1e1e1e; } .p-treetable .p-treetable-loading-icon { @@ -3843,6 +4001,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3867,6 +4026,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #383838; @@ -3939,6 +4099,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3964,6 +4125,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3987,6 +4149,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #383838; background: #1e1e1e; @@ -4027,6 +4190,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #383838; padding: 1rem; @@ -4093,6 +4257,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; @@ -4103,6 +4268,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-splitter { border: 1px solid #383838; background: #1e1e1e; @@ -4124,6 +4290,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #383838; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4192,6 +4359,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #1e1e1e; border: 1px solid #383838; @@ -4202,6 +4370,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4249,6 +4418,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4321,6 +4491,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4362,6 +4533,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #383838; } + .p-sidebar { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4372,7 +4544,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4382,13 +4554,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -4402,6 +4574,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #383838; color: rgba(255, 255, 255, 0.87); @@ -4421,6 +4594,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #383838; } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4460,6 +4634,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #43a5f4; color: #212529; @@ -4470,6 +4645,7 @@ color: #212529; border-color: #2396f2; } + .p-breadcrumb { background: #1e1e1e; border: 1px solid #383838; @@ -4501,6 +4677,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -4548,7 +4725,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4739,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4573,7 +4750,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4587,6 +4764,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4610,31 +4788,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4693,7 +4872,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4707,7 +4886,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4718,7 +4897,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4776,9 +4955,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #1e1e1e; @@ -4815,7 +4995,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4829,7 +5009,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4840,7 +5020,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4874,6 +5054,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #1e1e1e; @@ -4912,7 +5093,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4943,7 +5124,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4957,7 +5138,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4968,7 +5149,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4985,6 +5166,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5159,7 +5341,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5173,7 +5355,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5184,7 +5366,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5224,6 +5406,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5266,7 +5449,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5280,7 +5463,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5291,7 +5474,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5338,6 +5521,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5382,6 +5566,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #383838; @@ -5452,6 +5637,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #93cbf9; } + .p-tieredmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5502,7 +5688,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5516,7 +5702,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5527,7 +5713,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5541,6 +5727,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5596,6 +5783,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5684,6 +5872,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5734,7 +5923,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5744,7 +5933,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5754,7 +5943,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5764,9 +5953,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5797,7 +5987,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5854,7 +6044,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5864,7 +6054,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5873,23 +6063,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5913,6 +6109,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #383838; border-radius: 3px; @@ -5933,9 +6130,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1e1e1e; } + .p-badge { background: #64B5F6; color: #212529; @@ -5977,6 +6176,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #383838; color: rgba(255, 255, 255, 0.87); @@ -6012,6 +6212,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6026,6 +6227,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6041,6 +6243,7 @@ color: #212529; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6062,6 +6265,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6069,6 +6273,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #64B5F6; color: #212529; @@ -6101,6 +6306,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -6118,12 +6324,14 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #64B5F6; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #64B5F6; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #64B5F6; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #64B5F6; } diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css index 6ccea791777..3d798d14c92 100644 --- a/src/assets/components/themes/arya-green/theme.css +++ b/src/assets/components/themes/arya-green/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #ef9a9a; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-autocomplete-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -427,9 +440,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ef9a9a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -437,19 +452,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; border-color: #81C784; } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -476,7 +495,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -486,13 +505,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #81C784; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -664,10 +684,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #383838; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #383838; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -768,6 +794,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #54b358; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } @@ -831,12 +861,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #54b358; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #81C784; } @@ -875,9 +908,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ef9a9a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -885,22 +920,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1e1e1e; border: 1px solid #383838; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #121212; border: 1px solid #383838; @@ -944,6 +983,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1007,6 +1047,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #383838; } @@ -1019,9 +1060,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ef9a9a; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1034,60 +1083,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #383838; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1095,9 +1162,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1105,12 +1174,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1149,9 +1220,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #6abd6e; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1184,45 +1257,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ef9a9a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #383838; } @@ -1232,14 +1317,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #383838; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1314,9 +1402,11 @@ box-shadow: 0 0 0 1px #a7d8a9; border-color: #81C784; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ef9a9a; } + .p-multiselect { background: #121212; border: 1px solid #383838; @@ -1356,9 +1446,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1366,6 +1458,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1454,6 +1547,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #383838; } @@ -1463,12 +1557,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #383838; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ef9a9a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ef9a9a; } + .p-password-panel { padding: 1rem; background: #1e1e1e; @@ -1490,6 +1587,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1497,6 +1595,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1504,6 +1603,7 @@ color: rgba(255, 255, 255, 0.6); right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1541,9 +1641,11 @@ background: #54b358; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #383838; } @@ -1556,9 +1658,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #54b358; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1589,6 +1693,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1e1e1e; border: 1px solid #383838; @@ -1596,7 +1701,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1605,7 +1710,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1614,7 +1719,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1623,12 +1728,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ef9a9a; } + .p-slider { background: #383838; border: 0 none; @@ -1680,6 +1787,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1e1e1e; border: 1px solid #383838; @@ -1687,7 +1795,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1696,7 +1804,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1705,7 +1813,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1714,12 +1822,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ef9a9a; } + .p-treeselect { background: #121212; border: 1px solid #383838; @@ -1756,12 +1866,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1821,6 +1934,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #383838; } @@ -1830,6 +1944,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #383838; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1837,6 +1952,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #212529; background: #81C784; @@ -1948,7 +2064,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1975,426 +2091,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909c; border: 1px solid #78909c; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #121212; background: #ffe082; border: 1px solid #ffe082; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; } + .p-button.p-button-link { color: #81C784; background: transparent; @@ -2418,6 +2542,7 @@ color: #81C784; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2429,14 +2554,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2447,45 +2575,52 @@ background: rgba(255, 255, 255, 0.6); color: #121212; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2563,6 +2698,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #78909c; @@ -2591,6 +2727,7 @@ border-color: transparent; color: #78909c; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #81d4fa; @@ -2619,6 +2756,7 @@ border-color: transparent; color: #81d4fa; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2647,6 +2785,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2675,6 +2814,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2703,6 +2843,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f48fb1; @@ -2731,8 +2872,9 @@ border-color: transparent; color: #f48fb1; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2743,13 +2885,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -2775,6 +2917,7 @@ background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2868,9 +3011,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2880,17 +3023,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -2920,12 +3063,12 @@ background: #81C784; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1e1e1e; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1e1e1e; } .p-datatable .p-datatable-loading-icon { @@ -3028,6 +3171,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3066,10 +3210,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3097,6 +3243,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3116,6 +3263,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-column-filter-overlay { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3153,6 +3301,7 @@ border-top: 1px solid #383838; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3181,6 +3330,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3266,6 +3416,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3274,6 +3425,7 @@ background: #1e1e1e; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3312,6 +3464,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3321,9 +3474,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3334,9 +3487,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3393,6 +3546,7 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3478,6 +3632,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3486,6 +3641,7 @@ background: #1e1e1e; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #81C784; border-radius: 50%; @@ -3497,19 +3653,20 @@ background-color: #383838; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #383838; background: #1e1e1e; @@ -3566,11 +3723,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3643,6 +3800,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3782,7 +3940,7 @@ background: #81C784; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1e1e1e; } .p-treetable .p-treetable-loading-icon { @@ -3843,6 +4001,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3867,6 +4026,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #383838; @@ -3939,6 +4099,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3964,6 +4125,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3987,6 +4149,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #383838; background: #1e1e1e; @@ -4027,6 +4190,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #383838; padding: 1rem; @@ -4093,6 +4257,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; @@ -4103,6 +4268,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-splitter { border: 1px solid #383838; background: #1e1e1e; @@ -4124,6 +4290,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #383838; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4192,6 +4359,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #1e1e1e; border: 1px solid #383838; @@ -4202,6 +4370,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4249,6 +4418,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4321,6 +4491,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4362,6 +4533,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #383838; } + .p-sidebar { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4372,7 +4544,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4382,13 +4554,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -4402,6 +4574,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #383838; color: rgba(255, 255, 255, 0.87); @@ -4421,6 +4594,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #383838; } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4460,6 +4634,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #6abd6e; color: #212529; @@ -4470,6 +4645,7 @@ color: #212529; border-color: #54b358; } + .p-breadcrumb { background: #1e1e1e; border: 1px solid #383838; @@ -4501,6 +4677,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -4548,7 +4725,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4739,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4573,7 +4750,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4587,6 +4764,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4610,31 +4788,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4693,7 +4872,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4707,7 +4886,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4718,7 +4897,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4776,9 +4955,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #1e1e1e; @@ -4815,7 +4995,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4829,7 +5009,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4840,7 +5020,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4874,6 +5054,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #1e1e1e; @@ -4912,7 +5093,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4943,7 +5124,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4957,7 +5138,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4968,7 +5149,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4985,6 +5166,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5159,7 +5341,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5173,7 +5355,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5184,7 +5366,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5224,6 +5406,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5266,7 +5449,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5280,7 +5463,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5291,7 +5474,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5338,6 +5521,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5382,6 +5566,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #383838; @@ -5452,6 +5637,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #a7d8a9; } + .p-tieredmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5502,7 +5688,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5516,7 +5702,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5527,7 +5713,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5541,6 +5727,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5596,6 +5783,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5684,6 +5872,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5734,7 +5923,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5744,7 +5933,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5754,7 +5943,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5764,9 +5953,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5797,7 +5987,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5854,7 +6044,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5864,7 +6054,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5873,23 +6063,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5913,6 +6109,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #383838; border-radius: 3px; @@ -5933,9 +6130,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1e1e1e; } + .p-badge { background: #81C784; color: #212529; @@ -5977,6 +6176,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #383838; color: rgba(255, 255, 255, 0.87); @@ -6012,6 +6212,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6026,6 +6227,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6041,6 +6243,7 @@ color: #212529; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6062,6 +6265,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6069,6 +6273,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #81C784; color: #212529; @@ -6101,6 +6306,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -6118,12 +6324,14 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #81C784; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #81C784; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #81C784; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #81C784; } diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css index 87842c6f9c3..53bd37b0554 100644 --- a/src/assets/components/themes/arya-orange/theme.css +++ b/src/assets/components/themes/arya-orange/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #ef9a9a; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-autocomplete-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -427,9 +440,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ef9a9a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -437,19 +452,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; border-color: #FFD54F; } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -476,7 +495,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -486,13 +505,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #FFD54F; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -664,10 +684,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #383838; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #383838; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -768,6 +794,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #ffc50c; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } @@ -831,12 +861,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #ffc50c; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #FFD54F; } @@ -875,9 +908,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ef9a9a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -885,22 +920,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1e1e1e; border: 1px solid #383838; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #121212; border: 1px solid #383838; @@ -944,6 +983,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1007,6 +1047,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #383838; } @@ -1019,9 +1060,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ef9a9a; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1034,60 +1083,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #383838; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1095,9 +1162,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1105,12 +1174,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1149,9 +1220,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #ffcd2e; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1184,45 +1257,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ef9a9a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #383838; } @@ -1232,14 +1317,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #383838; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1314,9 +1402,11 @@ box-shadow: 0 0 0 1px #ffe284; border-color: #FFD54F; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ef9a9a; } + .p-multiselect { background: #121212; border: 1px solid #383838; @@ -1356,9 +1446,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1366,6 +1458,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1454,6 +1547,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #383838; } @@ -1463,12 +1557,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #383838; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ef9a9a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ef9a9a; } + .p-password-panel { padding: 1rem; background: #1e1e1e; @@ -1490,6 +1587,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1497,6 +1595,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1504,6 +1603,7 @@ color: rgba(255, 255, 255, 0.6); right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1541,9 +1641,11 @@ background: #ffc50c; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #383838; } @@ -1556,9 +1658,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffc50c; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1589,6 +1693,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1e1e1e; border: 1px solid #383838; @@ -1596,7 +1701,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1605,7 +1710,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1614,7 +1719,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1623,12 +1728,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ef9a9a; } + .p-slider { background: #383838; border: 0 none; @@ -1680,6 +1787,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1e1e1e; border: 1px solid #383838; @@ -1687,7 +1795,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1696,7 +1804,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1705,7 +1813,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1714,12 +1822,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ef9a9a; } + .p-treeselect { background: #121212; border: 1px solid #383838; @@ -1756,12 +1866,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1821,6 +1934,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #383838; } @@ -1830,6 +1944,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #383838; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1837,6 +1952,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #212529; background: #FFD54F; @@ -1948,7 +2064,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1975,426 +2091,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909c; border: 1px solid #78909c; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #121212; background: #ffe082; border: 1px solid #ffe082; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; } + .p-button.p-button-link { color: #FFD54F; background: transparent; @@ -2418,6 +2542,7 @@ color: #FFD54F; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2429,14 +2554,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2447,45 +2575,52 @@ background: rgba(255, 255, 255, 0.6); color: #121212; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2563,6 +2698,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #78909c; @@ -2591,6 +2727,7 @@ border-color: transparent; color: #78909c; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #81d4fa; @@ -2619,6 +2756,7 @@ border-color: transparent; color: #81d4fa; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2647,6 +2785,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2675,6 +2814,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2703,6 +2843,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f48fb1; @@ -2731,8 +2872,9 @@ border-color: transparent; color: #f48fb1; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2743,13 +2885,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -2775,6 +2917,7 @@ background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2868,9 +3011,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2880,17 +3023,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -2920,12 +3063,12 @@ background: #FFD54F; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1e1e1e; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1e1e1e; } .p-datatable .p-datatable-loading-icon { @@ -3028,6 +3171,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3066,10 +3210,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3097,6 +3243,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3116,6 +3263,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-column-filter-overlay { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3153,6 +3301,7 @@ border-top: 1px solid #383838; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3181,6 +3330,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3266,6 +3416,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3274,6 +3425,7 @@ background: #1e1e1e; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3312,6 +3464,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3321,9 +3474,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3334,9 +3487,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3393,6 +3546,7 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3478,6 +3632,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3486,6 +3641,7 @@ background: #1e1e1e; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #FFD54F; border-radius: 50%; @@ -3497,19 +3653,20 @@ background-color: #383838; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #383838; background: #1e1e1e; @@ -3566,11 +3723,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3643,6 +3800,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3782,7 +3940,7 @@ background: #FFD54F; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1e1e1e; } .p-treetable .p-treetable-loading-icon { @@ -3843,6 +4001,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3867,6 +4026,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #383838; @@ -3939,6 +4099,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3964,6 +4125,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3987,6 +4149,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #383838; background: #1e1e1e; @@ -4027,6 +4190,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #383838; padding: 1rem; @@ -4093,6 +4257,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; @@ -4103,6 +4268,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-splitter { border: 1px solid #383838; background: #1e1e1e; @@ -4124,6 +4290,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #383838; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4192,6 +4359,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #1e1e1e; border: 1px solid #383838; @@ -4202,6 +4370,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4249,6 +4418,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4321,6 +4491,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4362,6 +4533,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #383838; } + .p-sidebar { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4372,7 +4544,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4382,13 +4554,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -4402,6 +4574,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #383838; color: rgba(255, 255, 255, 0.87); @@ -4421,6 +4594,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #383838; } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4460,6 +4634,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #ffcd2e; color: #212529; @@ -4470,6 +4645,7 @@ color: #212529; border-color: #ffc50c; } + .p-breadcrumb { background: #1e1e1e; border: 1px solid #383838; @@ -4501,6 +4677,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -4548,7 +4725,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4739,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4573,7 +4750,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4587,6 +4764,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4610,31 +4788,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4693,7 +4872,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4707,7 +4886,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4718,7 +4897,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4776,9 +4955,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #1e1e1e; @@ -4815,7 +4995,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4829,7 +5009,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4840,7 +5020,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4874,6 +5054,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #1e1e1e; @@ -4912,7 +5093,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4943,7 +5124,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4957,7 +5138,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4968,7 +5149,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4985,6 +5166,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5159,7 +5341,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5173,7 +5355,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5184,7 +5366,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5224,6 +5406,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5266,7 +5449,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5280,7 +5463,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5291,7 +5474,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5338,6 +5521,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5382,6 +5566,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #383838; @@ -5452,6 +5637,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #ffe284; } + .p-tieredmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5502,7 +5688,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5516,7 +5702,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5527,7 +5713,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5541,6 +5727,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5596,6 +5783,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5684,6 +5872,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5734,7 +5923,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5744,7 +5933,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5754,7 +5943,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5764,9 +5953,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5797,7 +5987,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5854,7 +6044,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5864,7 +6054,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5873,23 +6063,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5913,6 +6109,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #383838; border-radius: 3px; @@ -5933,9 +6130,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1e1e1e; } + .p-badge { background: #FFD54F; color: #212529; @@ -5977,6 +6176,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #383838; color: rgba(255, 255, 255, 0.87); @@ -6012,6 +6212,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6026,6 +6227,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6041,6 +6243,7 @@ color: #212529; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6062,6 +6265,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6069,6 +6273,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #FFD54F; color: #212529; @@ -6101,6 +6306,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -6118,12 +6324,14 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #FFD54F; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #FFD54F; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #FFD54F; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #FFD54F; } diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css index 8f8bb2fb838..79e18605807 100644 --- a/src/assets/components/themes/arya-purple/theme.css +++ b/src/assets/components/themes/arya-purple/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #ef9a9a; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-autocomplete-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -427,9 +440,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ef9a9a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -437,19 +452,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; border-color: #BA68C8; } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -476,7 +495,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -486,13 +505,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #BA68C8; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -664,10 +684,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #383838; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #383838; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -768,6 +794,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #a241b2; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } @@ -831,12 +861,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #a241b2; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #BA68C8; } @@ -875,9 +908,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ef9a9a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -885,22 +920,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1e1e1e; border: 1px solid #383838; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #121212; border: 1px solid #383838; @@ -944,6 +983,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1007,6 +1047,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #383838; } @@ -1019,9 +1060,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ef9a9a; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1034,60 +1083,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #383838; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1095,9 +1162,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1105,12 +1174,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1149,9 +1220,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #b052c0; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1184,45 +1257,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ef9a9a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #383838; } @@ -1232,14 +1317,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #383838; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1314,9 +1402,11 @@ box-shadow: 0 0 0 1px #cf95d9; border-color: #BA68C8; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ef9a9a; } + .p-multiselect { background: #121212; border: 1px solid #383838; @@ -1356,9 +1446,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1366,6 +1458,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1454,6 +1547,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #383838; } @@ -1463,12 +1557,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #383838; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ef9a9a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ef9a9a; } + .p-password-panel { padding: 1rem; background: #1e1e1e; @@ -1490,6 +1587,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1497,6 +1595,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1504,6 +1603,7 @@ color: rgba(255, 255, 255, 0.6); right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1541,9 +1641,11 @@ background: #a241b2; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #383838; } @@ -1556,9 +1658,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #a241b2; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1589,6 +1693,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1e1e1e; border: 1px solid #383838; @@ -1596,7 +1701,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1605,7 +1710,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1614,7 +1719,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1623,12 +1728,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ef9a9a; } + .p-slider { background: #383838; border: 0 none; @@ -1680,6 +1787,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1e1e1e; border: 1px solid #383838; @@ -1687,7 +1795,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1696,7 +1804,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1705,7 +1813,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1714,12 +1822,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ef9a9a; } + .p-treeselect { background: #121212; border: 1px solid #383838; @@ -1756,12 +1866,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1821,6 +1934,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #383838; } @@ -1830,6 +1944,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #383838; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1837,6 +1952,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #ffffff; background: #BA68C8; @@ -1948,7 +2064,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1975,426 +2091,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909c; border: 1px solid #78909c; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #121212; background: #ffe082; border: 1px solid #ffe082; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; } + .p-button.p-button-link { color: #BA68C8; background: transparent; @@ -2418,6 +2542,7 @@ color: #BA68C8; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2429,14 +2554,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2447,45 +2575,52 @@ background: rgba(255, 255, 255, 0.6); color: #121212; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2563,6 +2698,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #78909c; @@ -2591,6 +2727,7 @@ border-color: transparent; color: #78909c; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #81d4fa; @@ -2619,6 +2756,7 @@ border-color: transparent; color: #81d4fa; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2647,6 +2785,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2675,6 +2814,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2703,6 +2843,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f48fb1; @@ -2731,8 +2872,9 @@ border-color: transparent; color: #f48fb1; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2743,13 +2885,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -2775,6 +2917,7 @@ background: rgba(186, 104, 200, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2868,9 +3011,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2880,17 +3023,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -2920,12 +3063,12 @@ background: #BA68C8; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1e1e1e; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1e1e1e; } .p-datatable .p-datatable-loading-icon { @@ -3028,6 +3171,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3066,10 +3210,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3097,6 +3243,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3116,6 +3263,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-column-filter-overlay { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3153,6 +3301,7 @@ border-top: 1px solid #383838; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3181,6 +3330,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3266,6 +3416,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3274,6 +3425,7 @@ background: #1e1e1e; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3312,6 +3464,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3321,9 +3474,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3334,9 +3487,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3393,6 +3546,7 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3478,6 +3632,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3486,6 +3641,7 @@ background: #1e1e1e; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #BA68C8; border-radius: 50%; @@ -3497,19 +3653,20 @@ background-color: #383838; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #383838; background: #1e1e1e; @@ -3566,11 +3723,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3643,6 +3800,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3782,7 +3940,7 @@ background: #BA68C8; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1e1e1e; } .p-treetable .p-treetable-loading-icon { @@ -3843,6 +4001,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -3867,6 +4026,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #383838; @@ -3939,6 +4099,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3964,6 +4125,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3987,6 +4149,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #383838; background: #1e1e1e; @@ -4027,6 +4190,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #383838; padding: 1rem; @@ -4093,6 +4257,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; @@ -4103,6 +4268,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-splitter { border: 1px solid #383838; background: #1e1e1e; @@ -4124,6 +4290,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #383838; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4192,6 +4359,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #1e1e1e; border: 1px solid #383838; @@ -4202,6 +4370,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4249,6 +4418,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4321,6 +4491,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4362,6 +4533,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #383838; } + .p-sidebar { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -4372,7 +4544,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4382,13 +4554,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -4402,6 +4574,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #383838; color: rgba(255, 255, 255, 0.87); @@ -4421,6 +4594,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #383838; } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4460,6 +4634,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #b052c0; color: #ffffff; @@ -4470,6 +4645,7 @@ color: #ffffff; border-color: #a241b2; } + .p-breadcrumb { background: #1e1e1e; border: 1px solid #383838; @@ -4501,6 +4677,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -4548,7 +4725,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4739,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4573,7 +4750,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4587,6 +4764,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4610,31 +4788,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4693,7 +4872,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4707,7 +4886,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4718,7 +4897,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4776,9 +4955,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #1e1e1e; @@ -4815,7 +4995,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4829,7 +5009,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4840,7 +5020,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4874,6 +5054,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #1e1e1e; @@ -4912,7 +5093,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4943,7 +5124,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4957,7 +5138,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4968,7 +5149,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4985,6 +5166,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5159,7 +5341,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5173,7 +5355,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5184,7 +5366,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5224,6 +5406,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5266,7 +5449,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5280,7 +5463,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5291,7 +5474,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5338,6 +5521,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5382,6 +5566,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #383838; @@ -5452,6 +5637,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #cf95d9; } + .p-tieredmenu { padding: 0.25rem 0; background: #1e1e1e; @@ -5502,7 +5688,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5516,7 +5702,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5527,7 +5713,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5541,6 +5727,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5596,6 +5783,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5684,6 +5872,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5734,7 +5923,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5744,7 +5933,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5754,7 +5943,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5764,9 +5953,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5797,7 +5987,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5854,7 +6044,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5864,7 +6054,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5873,23 +6063,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5913,6 +6109,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #383838; border-radius: 3px; @@ -5933,9 +6130,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1e1e1e; } + .p-badge { background: #BA68C8; color: #ffffff; @@ -5977,6 +6176,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #383838; color: rgba(255, 255, 255, 0.87); @@ -6012,6 +6212,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6026,6 +6227,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6041,6 +6243,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6062,6 +6265,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6069,6 +6273,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #BA68C8; color: #ffffff; @@ -6101,6 +6306,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -6118,12 +6324,14 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #BA68C8; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #BA68C8; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #BA68C8; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #BA68C8; } diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css index d7070766dc5..a883adb3239 100644 --- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.15s; } + .p-disabled, .p-component:disabled { opacity: 0.65; } + .p-error { color: #f19ea6; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } + .p-autocomplete-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -427,9 +440,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f19ea6; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -437,19 +452,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.107rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f19ea6; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; border-color: #8dd0ff; } + .p-datepicker { padding: 0; background: #2a323d; @@ -476,7 +495,7 @@ border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -486,13 +505,13 @@ transition: color 0.15s, box-shadow 0.15s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: color 0.15s, box-shadow 0.15s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #8dd0ff; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -664,10 +684,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.107rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f19ea6; } + .p-cascadeselect-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #3f4b5b; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #3f4b5b; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f19ea6; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -768,6 +794,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #1dadff; color: #151515; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f19ea6; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #3f4b5b; } @@ -831,15 +861,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #1dadff; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #151515; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f19ea6; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #3f4b5b; } @@ -878,9 +912,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f19ea6; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -888,22 +924,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #2a323d; border: 1px solid #3f4b5b; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: none; } + .p-dropdown { background: #20262e; border: 1px solid #3f4b5b; @@ -947,6 +987,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f19ea6; } + .p-dropdown-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1010,6 +1051,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #3f4b5b; } @@ -1022,9 +1064,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f19ea6; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -1037,60 +1087,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #3f4b5b; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f19ea6; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1098,9 +1166,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f19ea6; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1108,12 +1178,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.107rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.107rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1152,9 +1224,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #8dd0ff; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f19ea6; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1187,45 +1261,57 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.15s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f19ea6; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #3f4b5b; } @@ -1235,14 +1321,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #3f4b5b; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1317,9 +1406,11 @@ box-shadow: 0 0 0 1px #e3f3fe; border-color: #8dd0ff; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f19ea6; } + .p-multiselect { background: #20262e; border: 1px solid #3f4b5b; @@ -1359,9 +1450,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1369,6 +1462,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1457,6 +1551,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #3f4b5b; } @@ -1466,12 +1561,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #3f4b5b; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f19ea6; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f19ea6; } + .p-password-panel { padding: 1.25rem; background: #2a323d; @@ -1493,6 +1591,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #9fdaa8; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1500,6 +1599,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1507,6 +1607,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1544,9 +1645,11 @@ background: #1dadff; color: #151515; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f19ea6; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #3f4b5b; } @@ -1559,12 +1662,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #1dadff; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #151515; } + .p-rating { gap: 0.5rem; } @@ -1595,9 +1701,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f19ea6; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #151515; } + .p-selectbutton .p-button { background: #6c757d; border: 1px solid #6c757d; @@ -1605,7 +1713,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1614,7 +1722,7 @@ color: #ffffff; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight { @@ -1623,7 +1731,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1632,12 +1740,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f19ea6; } + .p-slider { background: #3f4b5b; border: 0 none; @@ -1689,6 +1799,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.15s; } + .p-togglebutton.p-button { background: #6c757d; border: 1px solid #6c757d; @@ -1696,7 +1807,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1705,7 +1816,7 @@ color: #ffffff; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight { @@ -1714,7 +1825,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1723,12 +1834,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f19ea6; } + .p-treeselect { background: #20262e; border: 1px solid #3f4b5b; @@ -1765,12 +1878,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f19ea6; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.75rem; } + .p-treeselect-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1830,6 +1946,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #3f4b5b; } @@ -1839,6 +1956,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #3f4b5b; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1846,6 +1964,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #151515; background: #8dd0ff; @@ -1957,7 +2076,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1984,426 +2103,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #6c757d; border: 1px solid #6c757d; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #5a6268; color: #ffffff; border-color: #5a6268; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px rgba(130, 138, 145, 0.5); } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #545b62; color: #ffffff; border-color: #4e555b; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(108, 117, 125, 0.04); color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(108, 117, 125, 0.16); color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #6c757d; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(108, 117, 125, 0.04); border-color: transparent; color: #6c757d; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(108, 117, 125, 0.16); border-color: transparent; color: #6c757d; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #151515; background: #7fd8e6; border: 1px solid #4cc8db; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #4cc8db; color: #151515; border-color: #26bdd3; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b1e8f0; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #26bdd3; color: #151515; border-color: #00b2cc; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #7fd8e6; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(127, 216, 230, 0.04); color: #7fd8e6; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(127, 216, 230, 0.16); color: #7fd8e6; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #7fd8e6; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(127, 216, 230, 0.04); border-color: transparent; color: #7fd8e6; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(127, 216, 230, 0.16); border-color: transparent; color: #7fd8e6; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #151515; background: #9fdaa8; border: 1px solid #78cc86; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #78cc86; color: #151515; border-color: #5ac06c; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #c5e8ca; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #5ac06c; color: #151515; border-color: #3cb553; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #9fdaa8; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(159, 218, 168, 0.04); color: #9fdaa8; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(159, 218, 168, 0.16); color: #9fdaa8; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #9fdaa8; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(159, 218, 168, 0.04); border-color: transparent; color: #9fdaa8; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(159, 218, 168, 0.16); border-color: transparent; color: #9fdaa8; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #151515; background: #ffe082; border: 1px solid #ffd54f; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd54f; color: #151515; border-color: #ffca28; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffecb3; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffca28; color: #151515; border-color: #ffc107; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #151515; background: #b7a2e0; border: 1px solid #9a7cd4; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #9a7cd4; color: #151515; border-color: #845fca; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d3c7ec; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #845fca; color: #151515; border-color: #6d43c0; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #b7a2e0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(183, 162, 224, 0.04); color: #b7a2e0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(183, 162, 224, 0.16); color: #b7a2e0; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #b7a2e0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(183, 162, 224, 0.04); border-color: transparent; color: #b7a2e0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(183, 162, 224, 0.16); border-color: transparent; color: #b7a2e0; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #151515; background: #f19ea6; border: 1px solid #e97984; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #e97984; color: #151515; border-color: #f75965; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffd0d9; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #f75965; color: #151515; border-color: #fd464e; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f19ea6; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(241, 158, 166, 0.04); color: #f19ea6; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(241, 158, 166, 0.16); color: #f19ea6; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f19ea6; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(241, 158, 166, 0.04); border-color: transparent; color: #f19ea6; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(241, 158, 166, 0.16); border-color: transparent; color: #f19ea6; } + .p-button.p-button-link { color: #8dd0ff; background: transparent; @@ -2427,6 +2554,7 @@ color: #8dd0ff; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2438,14 +2566,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2456,45 +2587,52 @@ background: #3f4b5b; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 4px; } @@ -2572,6 +2710,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #6c757d; @@ -2600,6 +2739,7 @@ border-color: transparent; color: #6c757d; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #7fd8e6; @@ -2628,6 +2768,7 @@ border-color: transparent; color: #7fd8e6; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #9fdaa8; @@ -2656,6 +2797,7 @@ border-color: transparent; color: #9fdaa8; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2684,6 +2826,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #b7a2e0; @@ -2712,6 +2855,7 @@ border-color: transparent; color: #b7a2e0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f19ea6; @@ -2740,8 +2884,9 @@ border-color: transparent; color: #f19ea6; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2752,13 +2897,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; @@ -2784,6 +2929,7 @@ background: #8dd0ff; color: #151515; } + .p-datatable .p-paginator-top { border-width: 0; border-radius: 0; @@ -2877,9 +3023,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2889,17 +3035,17 @@ transition: color 0.15s, box-shadow 0.15s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; @@ -2929,12 +3075,12 @@ background: #8dd0ff; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #2a323d; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #2a323d; } .p-datatable .p-datatable-loading-icon { @@ -3037,6 +3183,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0; border-radius: 0; @@ -3075,10 +3222,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3106,6 +3255,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3125,6 +3275,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-column-filter-overlay { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -3162,6 +3313,7 @@ border-top: 1px solid #3f4b5b; margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.5rem; border-bottom: 1px solid #3f4b5b; @@ -3190,6 +3342,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3275,6 +3428,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1.5rem; box-shadow: none; @@ -3283,6 +3437,7 @@ background: #2a323d; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); @@ -3321,6 +3476,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-paginator { background: #2a323d; color: #8dd0ff; @@ -3330,9 +3486,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 1px solid #3f4b5b; color: #8dd0ff; @@ -3343,9 +3499,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); border-color: #3f4b5b; color: #8dd0ff; @@ -3402,6 +3558,7 @@ border-color: #3f4b5b; color: #8dd0ff; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3487,6 +3644,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1.5rem; box-shadow: none; @@ -3495,6 +3653,7 @@ background: #2a323d; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3506,19 +3665,20 @@ background-color: #3f4b5b; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #3f4b5b; background: #2a323d; @@ -3575,11 +3735,11 @@ color: #151515; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #151515; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #151515; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3652,6 +3812,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-treetable .p-paginator-top { border-width: 0; border-radius: 0; @@ -3791,7 +3952,7 @@ background: #8dd0ff; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #2a323d; } .p-treetable .p-treetable-loading-icon { @@ -3852,6 +4013,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -3876,6 +4038,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem 1.25rem; border: 1px solid #3f4b5b; @@ -3948,6 +4111,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -3973,6 +4137,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #2a323d; } @@ -3996,6 +4161,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #3f4b5b; background: #2a323d; @@ -4036,6 +4202,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #3f4b5b; padding: 1rem 1.25rem; @@ -4102,6 +4269,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #3f4b5b; border: 0 none; @@ -4112,6 +4280,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-splitter { border: 1px solid #3f4b5b; background: #2a323d; @@ -4133,6 +4302,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #3f4b5b; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4201,6 +4371,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #2a323d; border: 1px solid #3f4b5b; @@ -4211,6 +4382,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4258,6 +4430,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: none; @@ -4330,6 +4503,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4371,6 +4545,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #3f4b5b; } + .p-sidebar { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4381,7 +4556,7 @@ padding: 1rem 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4391,13 +4566,13 @@ transition: color 0.15s, box-shadow 0.15s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; @@ -4411,6 +4586,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem 1.25rem; } + .p-tooltip .p-tooltip-text { background: #3f4b5b; color: rgba(255, 255, 255, 0.87); @@ -4430,6 +4606,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #3f4b5b; } + .p-fileupload .p-fileupload-buttonbar { background: #2a323d; padding: 1rem 1.25rem; @@ -4469,6 +4646,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #56bdff; color: #151515; @@ -4479,6 +4657,7 @@ color: #151515; border-color: #1dadff; } + .p-breadcrumb { background: #343e4d; border: 0 none; @@ -4510,6 +4689,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.87); } + .p-contextmenu { padding: 0.5rem 0; background: #2a323d; @@ -4557,7 +4737,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4571,7 +4751,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4582,7 +4762,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4596,6 +4776,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4619,31 +4800,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4702,7 +4884,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4716,7 +4898,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4727,7 +4909,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4785,9 +4967,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.5rem 0; background: #2a323d; @@ -4824,7 +5007,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4838,7 +5021,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4849,7 +5032,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4883,6 +5066,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem 1rem; background: #343e4d; @@ -4921,7 +5105,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4952,7 +5136,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4966,7 +5150,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4977,7 +5161,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4994,6 +5178,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5168,7 +5353,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5182,7 +5367,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5193,7 +5378,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5233,6 +5418,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #2a323d; @@ -5275,7 +5461,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5289,7 +5475,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5300,7 +5486,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5347,6 +5533,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.15s; @@ -5391,6 +5578,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #3f4b5b; @@ -5461,6 +5649,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #e3f3fe; } + .p-tieredmenu { padding: 0.5rem 0; background: #2a323d; @@ -5511,7 +5700,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5525,7 +5714,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5536,7 +5725,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5550,6 +5739,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5605,6 +5795,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5693,6 +5884,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5743,7 +5935,7 @@ color: #004085; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #004085; } .p-toast .p-toast-message.p-toast-message-success { @@ -5753,7 +5945,7 @@ color: #155724; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #155724; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5763,7 +5955,7 @@ color: #856404; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #856404; } .p-toast .p-toast-message.p-toast-message-error { @@ -5773,9 +5965,10 @@ color: #721c24; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #721c24; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5806,7 +5999,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5863,7 +6056,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.6); @@ -5873,7 +6066,7 @@ border-radius: 4px; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); } @@ -5882,23 +6075,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5922,6 +6121,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #3f4b5b; border-radius: 4px; @@ -5942,9 +6142,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #2a323d; } + .p-badge { background: #8dd0ff; color: #151515; @@ -5986,6 +6188,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #3f4b5b; color: rgba(255, 255, 255, 0.87); @@ -6021,6 +6224,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 4px; @@ -6035,6 +6239,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6050,6 +6255,7 @@ color: #151515; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6071,6 +6277,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -6078,6 +6285,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #8dd0ff; color: #151515; @@ -6110,6 +6318,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #2a323d; color: rgba(255, 255, 255, 0.87); diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css index 69138abcf22..2f31d744a89 100644 --- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.15s; } + .p-disabled, .p-component:disabled { opacity: 0.65; } + .p-error { color: #f19ea6; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f19ea6; } + .p-autocomplete-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -427,9 +440,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f19ea6; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -437,19 +452,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.107rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f19ea6; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; border-color: #c298d8; } + .p-datepicker { padding: 0; background: #2a323d; @@ -476,7 +495,7 @@ border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -486,13 +505,13 @@ transition: color 0.15s, box-shadow 0.15s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: color 0.15s, box-shadow 0.15s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #c298d8; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -664,10 +684,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.107rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f19ea6; } + .p-cascadeselect-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #3f4b5b; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #3f4b5b; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f19ea6; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -768,6 +794,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #9954bb; color: #151515; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f19ea6; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #3f4b5b; } @@ -831,15 +861,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9954bb; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #151515; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f19ea6; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #3f4b5b; } @@ -878,9 +912,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f19ea6; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -888,22 +924,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #2a323d; border: 1px solid #3f4b5b; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: none; } + .p-dropdown { background: #20262e; border: 1px solid #3f4b5b; @@ -947,6 +987,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f19ea6; } + .p-dropdown-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1010,6 +1051,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #3f4b5b; } @@ -1022,9 +1064,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f19ea6; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -1037,60 +1087,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #3f4b5b; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f19ea6; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1098,9 +1166,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f19ea6; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1108,12 +1178,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.107rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.107rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1152,9 +1224,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #c298d8; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f19ea6; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1187,45 +1261,57 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.15s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f19ea6; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #3f4b5b; } @@ -1235,14 +1321,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #3f4b5b; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1317,9 +1406,11 @@ box-shadow: 0 0 0 1px #f0e6f5; border-color: #c298d8; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f19ea6; } + .p-multiselect { background: #20262e; border: 1px solid #3f4b5b; @@ -1359,9 +1450,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1369,6 +1462,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1457,6 +1551,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #3f4b5b; } @@ -1466,12 +1561,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #3f4b5b; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f19ea6; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f19ea6; } + .p-password-panel { padding: 1.25rem; background: #2a323d; @@ -1493,6 +1591,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #9fdaa8; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1500,6 +1599,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1507,6 +1607,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1544,9 +1645,11 @@ background: #9954bb; color: #151515; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f19ea6; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #3f4b5b; } @@ -1559,12 +1662,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #9954bb; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #151515; } + .p-rating { gap: 0.5rem; } @@ -1595,9 +1701,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f19ea6; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #151515; } + .p-selectbutton .p-button { background: #6c757d; border: 1px solid #6c757d; @@ -1605,7 +1713,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1614,7 +1722,7 @@ color: #ffffff; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight { @@ -1623,7 +1731,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1632,12 +1740,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f19ea6; } + .p-slider { background: #3f4b5b; border: 0 none; @@ -1689,6 +1799,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.15s; } + .p-togglebutton.p-button { background: #6c757d; border: 1px solid #6c757d; @@ -1696,7 +1807,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1705,7 +1816,7 @@ color: #ffffff; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight { @@ -1714,7 +1825,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1723,12 +1834,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f19ea6; } + .p-treeselect { background: #20262e; border: 1px solid #3f4b5b; @@ -1765,12 +1878,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f19ea6; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.75rem; } + .p-treeselect-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -1830,6 +1946,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #3f4b5b; } @@ -1839,6 +1956,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #3f4b5b; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1846,6 +1964,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #151515; background: #c298d8; @@ -1957,7 +2076,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1984,426 +2103,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #6c757d; border: 1px solid #6c757d; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #5a6268; color: #ffffff; border-color: #5a6268; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px rgba(130, 138, 145, 0.5); } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #545b62; color: #ffffff; border-color: #4e555b; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(108, 117, 125, 0.04); color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(108, 117, 125, 0.16); color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #6c757d; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(108, 117, 125, 0.04); border-color: transparent; color: #6c757d; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(108, 117, 125, 0.16); border-color: transparent; color: #6c757d; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #151515; background: #7fd8e6; border: 1px solid #4cc8db; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #4cc8db; color: #151515; border-color: #26bdd3; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b1e8f0; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #26bdd3; color: #151515; border-color: #00b2cc; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #7fd8e6; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(127, 216, 230, 0.04); color: #7fd8e6; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(127, 216, 230, 0.16); color: #7fd8e6; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #7fd8e6; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(127, 216, 230, 0.04); border-color: transparent; color: #7fd8e6; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(127, 216, 230, 0.16); border-color: transparent; color: #7fd8e6; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #151515; background: #9fdaa8; border: 1px solid #78cc86; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #78cc86; color: #151515; border-color: #5ac06c; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #c5e8ca; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #5ac06c; color: #151515; border-color: #3cb553; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #9fdaa8; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(159, 218, 168, 0.04); color: #9fdaa8; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(159, 218, 168, 0.16); color: #9fdaa8; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #9fdaa8; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(159, 218, 168, 0.04); border-color: transparent; color: #9fdaa8; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(159, 218, 168, 0.16); border-color: transparent; color: #9fdaa8; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #151515; background: #ffe082; border: 1px solid #ffd54f; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd54f; color: #151515; border-color: #ffca28; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffecb3; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffca28; color: #151515; border-color: #ffc107; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #151515; background: #b7a2e0; border: 1px solid #9a7cd4; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #9a7cd4; color: #151515; border-color: #845fca; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d3c7ec; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #845fca; color: #151515; border-color: #6d43c0; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #b7a2e0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(183, 162, 224, 0.04); color: #b7a2e0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(183, 162, 224, 0.16); color: #b7a2e0; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #b7a2e0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(183, 162, 224, 0.04); border-color: transparent; color: #b7a2e0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(183, 162, 224, 0.16); border-color: transparent; color: #b7a2e0; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #151515; background: #f19ea6; border: 1px solid #e97984; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #e97984; color: #151515; border-color: #f75965; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffd0d9; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #f75965; color: #151515; border-color: #fd464e; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f19ea6; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(241, 158, 166, 0.04); color: #f19ea6; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(241, 158, 166, 0.16); color: #f19ea6; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f19ea6; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(241, 158, 166, 0.04); border-color: transparent; color: #f19ea6; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(241, 158, 166, 0.16); border-color: transparent; color: #f19ea6; } + .p-button.p-button-link { color: #c298d8; background: transparent; @@ -2427,6 +2554,7 @@ color: #c298d8; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2438,14 +2566,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2456,45 +2587,52 @@ background: #3f4b5b; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 4px; } @@ -2572,6 +2710,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #6c757d; @@ -2600,6 +2739,7 @@ border-color: transparent; color: #6c757d; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #7fd8e6; @@ -2628,6 +2768,7 @@ border-color: transparent; color: #7fd8e6; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #9fdaa8; @@ -2656,6 +2797,7 @@ border-color: transparent; color: #9fdaa8; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2684,6 +2826,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #b7a2e0; @@ -2712,6 +2855,7 @@ border-color: transparent; color: #b7a2e0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f19ea6; @@ -2740,8 +2884,9 @@ border-color: transparent; color: #f19ea6; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2752,13 +2897,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; @@ -2784,6 +2929,7 @@ background: #c298d8; color: #151515; } + .p-datatable .p-paginator-top { border-width: 0; border-radius: 0; @@ -2877,9 +3023,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2889,17 +3035,17 @@ transition: color 0.15s, box-shadow 0.15s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; @@ -2929,12 +3075,12 @@ background: #c298d8; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #2a323d; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #2a323d; } .p-datatable .p-datatable-loading-icon { @@ -3037,6 +3183,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0; border-radius: 0; @@ -3075,10 +3222,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3106,6 +3255,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3125,6 +3275,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-column-filter-overlay { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -3162,6 +3313,7 @@ border-top: 1px solid #3f4b5b; margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.5rem; border-bottom: 1px solid #3f4b5b; @@ -3190,6 +3342,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3275,6 +3428,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1.5rem; box-shadow: none; @@ -3283,6 +3437,7 @@ background: #2a323d; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); @@ -3321,6 +3476,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-paginator { background: #2a323d; color: #c298d8; @@ -3330,9 +3486,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 1px solid #3f4b5b; color: #c298d8; @@ -3343,9 +3499,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); border-color: #3f4b5b; color: #c298d8; @@ -3402,6 +3558,7 @@ border-color: #3f4b5b; color: #c298d8; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3487,6 +3644,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1.5rem; box-shadow: none; @@ -3495,6 +3653,7 @@ background: #2a323d; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3506,19 +3665,20 @@ background-color: #3f4b5b; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #3f4b5b; background: #2a323d; @@ -3575,11 +3735,11 @@ color: #151515; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #151515; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #151515; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3652,6 +3812,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-treetable .p-paginator-top { border-width: 0; border-radius: 0; @@ -3791,7 +3952,7 @@ background: #c298d8; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #2a323d; } .p-treetable .p-treetable-loading-icon { @@ -3852,6 +4013,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -3876,6 +4038,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem 1.25rem; border: 1px solid #3f4b5b; @@ -3948,6 +4111,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -3973,6 +4137,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #2a323d; } @@ -3996,6 +4161,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #3f4b5b; background: #2a323d; @@ -4036,6 +4202,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #3f4b5b; padding: 1rem 1.25rem; @@ -4102,6 +4269,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #3f4b5b; border: 0 none; @@ -4112,6 +4280,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-splitter { border: 1px solid #3f4b5b; background: #2a323d; @@ -4133,6 +4302,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #3f4b5b; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4201,6 +4371,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #2a323d; border: 1px solid #3f4b5b; @@ -4211,6 +4382,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4258,6 +4430,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: none; @@ -4330,6 +4503,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4371,6 +4545,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #3f4b5b; } + .p-sidebar { background: #2a323d; color: rgba(255, 255, 255, 0.87); @@ -4381,7 +4556,7 @@ padding: 1rem 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4391,13 +4566,13 @@ transition: color 0.15s, box-shadow 0.15s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; @@ -4411,6 +4586,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem 1.25rem; } + .p-tooltip .p-tooltip-text { background: #3f4b5b; color: rgba(255, 255, 255, 0.87); @@ -4430,6 +4606,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #3f4b5b; } + .p-fileupload .p-fileupload-buttonbar { background: #2a323d; padding: 1rem 1.25rem; @@ -4469,6 +4646,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #aa70c7; color: #151515; @@ -4479,6 +4657,7 @@ color: #151515; border-color: #9954bb; } + .p-breadcrumb { background: #343e4d; border: 0 none; @@ -4510,6 +4689,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.87); } + .p-contextmenu { padding: 0.5rem 0; background: #2a323d; @@ -4557,7 +4737,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4571,7 +4751,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4582,7 +4762,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4596,6 +4776,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4619,31 +4800,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4702,7 +4884,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4716,7 +4898,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4727,7 +4909,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4785,9 +4967,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.5rem 0; background: #2a323d; @@ -4824,7 +5007,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4838,7 +5021,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4849,7 +5032,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4883,6 +5066,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem 1rem; background: #343e4d; @@ -4921,7 +5105,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4952,7 +5136,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4966,7 +5150,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4977,7 +5161,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4994,6 +5178,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5168,7 +5353,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5182,7 +5367,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5193,7 +5378,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5233,6 +5418,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #2a323d; @@ -5275,7 +5461,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5289,7 +5475,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5300,7 +5486,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5347,6 +5533,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.15s; @@ -5391,6 +5578,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #3f4b5b; @@ -5461,6 +5649,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #f0e6f5; } + .p-tieredmenu { padding: 0.5rem 0; background: #2a323d; @@ -5511,7 +5700,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5525,7 +5714,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5536,7 +5725,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5550,6 +5739,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5605,6 +5795,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5693,6 +5884,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5743,7 +5935,7 @@ color: #004085; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #004085; } .p-toast .p-toast-message.p-toast-message-success { @@ -5753,7 +5945,7 @@ color: #155724; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #155724; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5763,7 +5955,7 @@ color: #856404; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #856404; } .p-toast .p-toast-message.p-toast-message-error { @@ -5773,9 +5965,10 @@ color: #721c24; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #721c24; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5806,7 +5999,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5863,7 +6056,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.6); @@ -5873,7 +6066,7 @@ border-radius: 4px; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); } @@ -5882,23 +6075,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5922,6 +6121,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #3f4b5b; border-radius: 4px; @@ -5942,9 +6142,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #2a323d; } + .p-badge { background: #c298d8; color: #151515; @@ -5986,6 +6188,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #3f4b5b; color: rgba(255, 255, 255, 0.87); @@ -6021,6 +6224,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 4px; @@ -6035,6 +6239,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6050,6 +6255,7 @@ color: #151515; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6071,6 +6277,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -6078,6 +6285,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #c298d8; color: #151515; @@ -6110,6 +6318,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #2a323d; color: rgba(255, 255, 255, 0.87); diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css index 3d2678b4972..1fccc8fbaa2 100644 --- a/src/assets/components/themes/bootstrap4-light-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.15s; } + .p-disabled, .p-component:disabled { opacity: 0.65; } + .p-error { color: #dc3545; } + .p-text-secondary { color: #6c757d; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } + .p-autocomplete-panel { background: #ffffff; color: #212529; @@ -427,9 +440,11 @@ color: #212529; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #dc3545; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -437,19 +452,23 @@ color: #495057; right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #495057; right: 3.107rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #dc3545; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); border-color: #007bff; } + .p-datepicker { padding: 0; background: #ffffff; @@ -476,7 +495,7 @@ border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6c757d; @@ -486,13 +505,13 @@ transition: box-shadow 0.15s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #495057; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #212529; transition: box-shadow 0.15s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #007bff; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -664,10 +684,12 @@ color: #495057; right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #495057; right: 3.107rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #dc3545; } + .p-cascadeselect-panel { background: #ffffff; color: #212529; @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #efefef; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #efefef; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #dc3545; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -768,6 +794,7 @@ color: #495057; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #0062cc; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #dc3545; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #efefef; } @@ -831,15 +861,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #0062cc; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #dc3545; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #ced4da; } @@ -878,9 +912,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #dc3545; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -888,22 +924,26 @@ color: #495057; right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #212529; border: 1px solid #212529; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: none; } + .p-dropdown { background: #ffffff; border: 1px solid #ced4da; @@ -947,6 +987,7 @@ .p-dropdown.p-invalid.p-component { border-color: #dc3545; } + .p-dropdown-panel { background: #ffffff; color: #212529; @@ -1010,6 +1051,7 @@ color: #212529; background: transparent; } + .p-input-filled .p-dropdown { background: #efefef; } @@ -1022,9 +1064,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #dc3545; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #e9ecef; color: #495057; @@ -1037,60 +1087,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #ced4da; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #495057; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #495057; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #dc3545; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1098,9 +1166,11 @@ color: #495057; right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #dc3545; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1108,12 +1178,14 @@ color: #495057; right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.107rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.107rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1152,9 +1224,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #007bff; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #dc3545; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1187,45 +1261,57 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: #6c757d; transition-duration: 0.15s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #dc3545; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: #495057; } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: #495057; } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: #6c757d; } + :-moz-placeholder { color: #6c757d; } + ::-moz-placeholder { color: #6c757d; } + :-ms-input-placeholder { color: #6c757d; } + .p-input-filled .p-inputtext { background-color: #efefef; } @@ -1235,14 +1321,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #efefef; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox { background: #ffffff; color: #212529; @@ -1317,9 +1406,11 @@ box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); border-color: #007bff; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #dc3545; } + .p-multiselect { background: #ffffff; border: 1px solid #ced4da; @@ -1359,9 +1450,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1369,6 +1462,7 @@ color: #495057; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #212529; @@ -1457,6 +1551,7 @@ color: #212529; background: transparent; } + .p-input-filled .p-multiselect { background: #efefef; } @@ -1466,12 +1561,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #efefef; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #dc3545; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #dc3545; } + .p-password-panel { padding: 1.25rem; background: #ffffff; @@ -1493,6 +1591,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #28a745; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1500,6 +1599,7 @@ color: #495057; right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1507,6 +1607,7 @@ color: #495057; right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1544,9 +1645,11 @@ background: #0062cc; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #dc3545; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #efefef; } @@ -1559,12 +1662,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0062cc; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { gap: 0.5rem; } @@ -1595,9 +1701,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #dc3545; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #ffffff; } + .p-selectbutton .p-button { background: #6c757d; border: 1px solid #6c757d; @@ -1605,7 +1713,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1614,7 +1722,7 @@ color: #ffffff; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight { @@ -1623,7 +1731,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1632,12 +1740,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #dc3545; } + .p-slider { background: #e9ecef; border: 0 none; @@ -1689,6 +1799,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.15s; } + .p-togglebutton.p-button { background: #6c757d; border: 1px solid #6c757d; @@ -1696,7 +1807,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1705,7 +1816,7 @@ color: #ffffff; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight { @@ -1714,7 +1825,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1723,12 +1834,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #dc3545; } + .p-treeselect { background: #ffffff; border: 1px solid #ced4da; @@ -1765,12 +1878,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #dc3545; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: #212529; @@ -1830,6 +1946,7 @@ color: #212529; background: transparent; } + .p-input-filled .p-treeselect { background: #efefef; } @@ -1839,6 +1956,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #efefef; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1846,6 +1964,7 @@ color: #495057; right: 2.357rem; } + .p-button { color: #ffffff; background: #007bff; @@ -1957,7 +2076,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1984,426 +2103,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #6c757d; border: 1px solid #6c757d; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #5a6268; color: #ffffff; border-color: #5a6268; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #545b62; color: #ffffff; border-color: #4e555b; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(108, 117, 125, 0.04); color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(108, 117, 125, 0.16); color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #6c757d; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(108, 117, 125, 0.04); border-color: transparent; color: #6c757d; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(108, 117, 125, 0.16); border-color: transparent; color: #6c757d; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #17a2b8; border: 1px solid #17a2b8; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #138496; color: #ffffff; border-color: #117a8b; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5); } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #138496; color: #ffffff; border-color: #117a8b; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #17a2b8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(23, 162, 184, 0.04); color: #17a2b8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(23, 162, 184, 0.16); color: #17a2b8; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #17a2b8; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(23, 162, 184, 0.04); border-color: transparent; color: #17a2b8; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(23, 162, 184, 0.16); border-color: transparent; color: #17a2b8; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #28a745; border: 1px solid #28a745; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #218838; color: #ffffff; border-color: #1e7e34; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5); } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #1e7e34; color: #ffffff; border-color: #1c7430; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #28a745; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(40, 167, 69, 0.04); color: #28a745; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(40, 167, 69, 0.16); color: #28a745; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #28a745; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(40, 167, 69, 0.04); border-color: transparent; color: #28a745; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(40, 167, 69, 0.16); border-color: transparent; color: #28a745; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #ffc107; border: 1px solid #ffc107; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #e0a800; color: #212529; border-color: #d39e00; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #d39e00; color: #212529; border-color: #c69500; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffc107; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 193, 7, 0.04); color: #ffc107; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 193, 7, 0.16); color: #ffc107; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffc107; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 193, 7, 0.04); border-color: transparent; color: #ffc107; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 193, 7, 0.16); border-color: transparent; color: #ffc107; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #6f42c1; border: 1px solid #6f42c1; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #633bad; color: #ffffff; border-color: #58349a; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #d3c6ec; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #58349a; color: #ffffff; border-color: #4d2e87; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #6f42c1; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(111, 66, 193, 0.04); color: #6f42c1; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(111, 66, 193, 0.16); color: #6f42c1; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #6f42c1; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(111, 66, 193, 0.04); border-color: transparent; color: #6f42c1; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(111, 66, 193, 0.16); border-color: transparent; color: #6f42c1; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #dc3545; border: 1px solid #dc3545; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c82333; color: #ffffff; border-color: #bd2130; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #bd2130; color: #ffffff; border-color: #b21f2d; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #dc3545; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(220, 53, 69, 0.04); color: #dc3545; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(220, 53, 69, 0.16); color: #dc3545; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #dc3545; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(220, 53, 69, 0.04); border-color: transparent; color: #dc3545; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(220, 53, 69, 0.16); border-color: transparent; color: #dc3545; } + .p-button.p-button-link { color: #007bff; background: transparent; @@ -2427,6 +2554,7 @@ color: #007bff; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2438,14 +2566,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2456,45 +2587,52 @@ background: #343a40; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 4px; } @@ -2572,6 +2710,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #6c757d; @@ -2600,6 +2739,7 @@ border-color: transparent; color: #6c757d; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #17a2b8; @@ -2628,6 +2768,7 @@ border-color: transparent; color: #17a2b8; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #28a745; @@ -2656,6 +2797,7 @@ border-color: transparent; color: #28a745; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffc107; @@ -2684,6 +2826,7 @@ border-color: transparent; color: #ffc107; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #6f42c1; @@ -2712,6 +2855,7 @@ border-color: transparent; color: #6f42c1; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #dc3545; @@ -2740,8 +2884,9 @@ border-color: transparent; color: #dc3545; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6c757d; @@ -2752,13 +2897,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #495057; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); @@ -2784,6 +2929,7 @@ background: #007bff; color: #ffffff; } + .p-datatable .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -2877,9 +3023,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6c757d; @@ -2889,17 +3035,17 @@ transition: box-shadow 0.15s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #495057; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); @@ -2929,12 +3075,12 @@ background: #007bff; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #efefef; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #ffffff; } .p-datatable .p-datatable-loading-icon { @@ -3037,6 +3183,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -3075,10 +3222,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3106,6 +3255,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3125,6 +3275,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-column-filter-overlay { background: #ffffff; color: #212529; @@ -3162,6 +3313,7 @@ border-top: 1px solid #dee2e6; margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.5rem; border-bottom: 1px solid #dee2e6; @@ -3190,6 +3342,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3275,6 +3428,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #e9ecef; } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1.5rem; box-shadow: none; @@ -3283,6 +3437,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #212529; @@ -3321,6 +3476,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-paginator { background: #ffffff; color: #007bff; @@ -3330,9 +3486,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: #ffffff; border: 1px solid #dee2e6; color: #007bff; @@ -3343,9 +3499,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; border-color: #dee2e6; color: #007bff; @@ -3402,6 +3558,7 @@ border-color: #dee2e6; color: #007bff; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3487,6 +3644,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #e9ecef; } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1.5rem; box-shadow: none; @@ -3495,6 +3653,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3506,19 +3665,20 @@ background-color: #dee2e6; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3575,11 +3735,11 @@ color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3652,6 +3812,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-treetable .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -3791,7 +3952,7 @@ background: #007bff; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #efefef; } .p-treetable .p-treetable-loading-icon { @@ -3852,6 +4013,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #efefef; color: #212529; @@ -3876,6 +4038,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem 1.25rem; border: 1px solid #dee2e6; @@ -3948,6 +4111,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #ffffff; color: #212529; @@ -3973,6 +4137,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3996,6 +4161,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -4036,6 +4202,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem 1.25rem; @@ -4102,6 +4269,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #efefef; border: 0 none; @@ -4112,6 +4280,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -4133,6 +4302,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4201,6 +4371,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #efefef; border: 1px solid #dee2e6; @@ -4211,6 +4382,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #212529; @@ -4258,6 +4430,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: none; @@ -4330,6 +4503,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #212529; @@ -4371,6 +4545,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: rgba(0, 0, 0, 0.2); } + .p-sidebar { background: #ffffff; color: #212529; @@ -4381,7 +4556,7 @@ padding: 1rem 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6c757d; @@ -4391,13 +4566,13 @@ transition: box-shadow 0.15s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #495057; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); @@ -4411,6 +4586,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem 1.25rem; } + .p-tooltip .p-tooltip-text { background: #212529; color: #ffffff; @@ -4430,6 +4606,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #212529; } + .p-fileupload .p-fileupload-buttonbar { background: #efefef; padding: 1rem 1.25rem; @@ -4469,6 +4646,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #0069d9; color: #ffffff; @@ -4479,6 +4657,7 @@ color: #ffffff; border-color: #0062cc; } + .p-breadcrumb { background: #efefef; border: 0 none; @@ -4510,6 +4689,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6c757d; } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4557,7 +4737,7 @@ color: #212529; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4571,7 +4751,7 @@ color: #212529; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4582,7 +4762,7 @@ color: #212529; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem-separator { @@ -4596,6 +4776,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4619,31 +4800,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4702,7 +4884,7 @@ color: #212529; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4716,7 +4898,7 @@ color: #212529; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4727,7 +4909,7 @@ color: #212529; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-megamenu-panel { @@ -4785,9 +4967,10 @@ color: rgba(0, 0, 0, 0.7); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.7); } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4824,7 +5007,7 @@ color: #212529; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4838,7 +5021,7 @@ color: #212529; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4849,7 +5032,7 @@ color: #212529; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu.p-menu-overlay { @@ -4883,6 +5066,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem 1rem; background: #efefef; @@ -4921,7 +5105,7 @@ color: rgba(0, 0, 0, 0.7); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.7); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4952,7 +5136,7 @@ color: #212529; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4966,7 +5150,7 @@ color: #212529; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4977,7 +5161,7 @@ color: #212529; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-submenu-list { @@ -4994,6 +5178,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5168,7 +5353,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5182,7 +5367,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5193,7 +5378,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5233,6 +5418,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5275,7 +5461,7 @@ color: #212529; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5289,7 +5475,7 @@ color: #212529; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5300,7 +5486,7 @@ color: #212529; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu.p-slidemenu-overlay { @@ -5347,6 +5533,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.15s; @@ -5391,6 +5578,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #dee2e6; @@ -5461,6 +5649,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5511,7 +5700,7 @@ color: #212529; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5525,7 +5714,7 @@ color: #212529; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5536,7 +5725,7 @@ color: #212529; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem-separator { @@ -5550,6 +5739,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5605,6 +5795,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5693,6 +5884,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5743,7 +5935,7 @@ color: #004085; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #004085; } .p-toast .p-toast-message.p-toast-message-success { @@ -5753,7 +5945,7 @@ color: #155724; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #155724; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5763,7 +5955,7 @@ color: #856404; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #856404; } .p-toast .p-toast-message.p-toast-message-error { @@ -5773,9 +5965,10 @@ color: #721c24; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #721c24; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5806,7 +5999,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5863,7 +6056,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #efefef; @@ -5873,7 +6066,7 @@ border-radius: 4px; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #efefef; } @@ -5882,23 +6075,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5922,6 +6121,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #dee2e6; border-radius: 4px; @@ -5942,9 +6142,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #007bff; color: #ffffff; @@ -5986,6 +6188,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #dee2e6; color: #212529; @@ -6021,6 +6224,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 4px; @@ -6035,6 +6239,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6050,6 +6255,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6071,6 +6277,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e9ecef; border-radius: 4px; @@ -6078,6 +6285,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #007bff; color: #ffffff; @@ -6110,6 +6318,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #212529; diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css index 895435195fe..d48c8faed77 100644 --- a/src/assets/components/themes/bootstrap4-light-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.15s; } + .p-disabled, .p-component:disabled { opacity: 0.65; } + .p-error { color: #dc3545; } + .p-text-secondary { color: #6c757d; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #dc3545; } + .p-autocomplete-panel { background: #ffffff; color: #212529; @@ -427,9 +440,11 @@ color: #212529; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #dc3545; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -437,19 +452,23 @@ color: #495057; right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #495057; right: 3.107rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #dc3545; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); border-color: #883cae; } + .p-datepicker { padding: 0; background: #ffffff; @@ -476,7 +495,7 @@ border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6c757d; @@ -486,13 +505,13 @@ transition: box-shadow 0.15s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #495057; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #212529; transition: box-shadow 0.15s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #883cae; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -664,10 +684,12 @@ color: #495057; right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #495057; right: 3.107rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #dc3545; } + .p-cascadeselect-panel { background: #ffffff; color: #212529; @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #efefef; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #efefef; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #dc3545; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -768,6 +794,7 @@ color: #495057; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #68329e; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #dc3545; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #efefef; } @@ -831,15 +861,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #68329e; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #dc3545; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #ced4da; } @@ -878,9 +912,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #dc3545; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -888,22 +924,26 @@ color: #495057; right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #212529; border: 1px solid #212529; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: none; } + .p-dropdown { background: #ffffff; border: 1px solid #ced4da; @@ -947,6 +987,7 @@ .p-dropdown.p-invalid.p-component { border-color: #dc3545; } + .p-dropdown-panel { background: #ffffff; color: #212529; @@ -1010,6 +1051,7 @@ color: #212529; background: transparent; } + .p-input-filled .p-dropdown { background: #efefef; } @@ -1022,9 +1064,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #dc3545; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #e9ecef; color: #495057; @@ -1037,60 +1087,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #ced4da; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #495057; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #495057; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #dc3545; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1098,9 +1166,11 @@ color: #495057; right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #dc3545; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1108,12 +1178,14 @@ color: #495057; right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.107rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.107rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1152,9 +1224,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #883cae; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #dc3545; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1187,45 +1261,57 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: #6c757d; transition-duration: 0.15s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #dc3545; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: #495057; } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: #495057; } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: #6c757d; } + :-moz-placeholder { color: #6c757d; } + ::-moz-placeholder { color: #6c757d; } + :-ms-input-placeholder { color: #6c757d; } + .p-input-filled .p-inputtext { background-color: #efefef; } @@ -1235,14 +1321,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #efefef; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox { background: #ffffff; color: #212529; @@ -1317,9 +1406,11 @@ box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); border-color: #883cae; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #dc3545; } + .p-multiselect { background: #ffffff; border: 1px solid #ced4da; @@ -1359,9 +1450,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1369,6 +1462,7 @@ color: #495057; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #212529; @@ -1457,6 +1551,7 @@ color: #212529; background: transparent; } + .p-input-filled .p-multiselect { background: #efefef; } @@ -1466,12 +1561,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #efefef; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #dc3545; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #dc3545; } + .p-password-panel { padding: 1.25rem; background: #ffffff; @@ -1493,6 +1591,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #28a745; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1500,6 +1599,7 @@ color: #495057; right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1507,6 +1607,7 @@ color: #495057; right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1544,9 +1645,11 @@ background: #68329e; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #dc3545; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #efefef; } @@ -1559,12 +1662,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #68329e; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { gap: 0.5rem; } @@ -1595,9 +1701,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #dc3545; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #ffffff; } + .p-selectbutton .p-button { background: #6c757d; border: 1px solid #6c757d; @@ -1605,7 +1713,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1614,7 +1722,7 @@ color: #ffffff; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight { @@ -1623,7 +1731,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1632,12 +1740,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #dc3545; } + .p-slider { background: #e9ecef; border: 0 none; @@ -1689,6 +1799,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.15s; } + .p-togglebutton.p-button { background: #6c757d; border: 1px solid #6c757d; @@ -1696,7 +1807,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1705,7 +1816,7 @@ color: #ffffff; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight { @@ -1714,7 +1825,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1723,12 +1834,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #dc3545; } + .p-treeselect { background: #ffffff; border: 1px solid #ced4da; @@ -1765,12 +1878,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #dc3545; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: #212529; @@ -1830,6 +1946,7 @@ color: #212529; background: transparent; } + .p-input-filled .p-treeselect { background: #efefef; } @@ -1839,6 +1956,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #efefef; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1846,6 +1964,7 @@ color: #495057; right: 2.357rem; } + .p-button { color: #ffffff; background: #883cae; @@ -1957,7 +2076,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1984,426 +2103,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #6c757d; border: 1px solid #6c757d; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #5a6268; color: #ffffff; border-color: #5a6268; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #545b62; color: #ffffff; border-color: #4e555b; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(108, 117, 125, 0.04); color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(108, 117, 125, 0.16); color: #6c757d; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #6c757d; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(108, 117, 125, 0.04); border-color: transparent; color: #6c757d; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(108, 117, 125, 0.16); border-color: transparent; color: #6c757d; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #17a2b8; border: 1px solid #17a2b8; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #138496; color: #ffffff; border-color: #117a8b; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5); } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #138496; color: #ffffff; border-color: #117a8b; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #17a2b8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(23, 162, 184, 0.04); color: #17a2b8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(23, 162, 184, 0.16); color: #17a2b8; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #17a2b8; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(23, 162, 184, 0.04); border-color: transparent; color: #17a2b8; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(23, 162, 184, 0.16); border-color: transparent; color: #17a2b8; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #28a745; border: 1px solid #28a745; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #218838; color: #ffffff; border-color: #1e7e34; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5); } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #1e7e34; color: #ffffff; border-color: #1c7430; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #28a745; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(40, 167, 69, 0.04); color: #28a745; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(40, 167, 69, 0.16); color: #28a745; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #28a745; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(40, 167, 69, 0.04); border-color: transparent; color: #28a745; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(40, 167, 69, 0.16); border-color: transparent; color: #28a745; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #ffc107; border: 1px solid #ffc107; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #e0a800; color: #212529; border-color: #d39e00; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #d39e00; color: #212529; border-color: #c69500; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffc107; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 193, 7, 0.04); color: #ffc107; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 193, 7, 0.16); color: #ffc107; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffc107; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 193, 7, 0.04); border-color: transparent; color: #ffc107; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 193, 7, 0.16); border-color: transparent; color: #ffc107; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #6f42c1; border: 1px solid #6f42c1; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #633bad; color: #ffffff; border-color: #58349a; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #d3c6ec; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #58349a; color: #ffffff; border-color: #4d2e87; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #6f42c1; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(111, 66, 193, 0.04); color: #6f42c1; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(111, 66, 193, 0.16); color: #6f42c1; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #6f42c1; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(111, 66, 193, 0.04); border-color: transparent; color: #6f42c1; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(111, 66, 193, 0.16); border-color: transparent; color: #6f42c1; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #dc3545; border: 1px solid #dc3545; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c82333; color: #ffffff; border-color: #bd2130; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5); } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #bd2130; color: #ffffff; border-color: #b21f2d; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #dc3545; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(220, 53, 69, 0.04); color: #dc3545; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(220, 53, 69, 0.16); color: #dc3545; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #dc3545; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(220, 53, 69, 0.04); border-color: transparent; color: #dc3545; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(220, 53, 69, 0.16); border-color: transparent; color: #dc3545; } + .p-button.p-button-link { color: #883cae; background: transparent; @@ -2427,6 +2554,7 @@ color: #883cae; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2438,14 +2566,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2456,45 +2587,52 @@ background: #343a40; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 4px; } @@ -2572,6 +2710,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #6c757d; @@ -2600,6 +2739,7 @@ border-color: transparent; color: #6c757d; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #17a2b8; @@ -2628,6 +2768,7 @@ border-color: transparent; color: #17a2b8; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #28a745; @@ -2656,6 +2797,7 @@ border-color: transparent; color: #28a745; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffc107; @@ -2684,6 +2826,7 @@ border-color: transparent; color: #ffc107; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #6f42c1; @@ -2712,6 +2855,7 @@ border-color: transparent; color: #6f42c1; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #dc3545; @@ -2740,8 +2884,9 @@ border-color: transparent; color: #dc3545; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6c757d; @@ -2752,13 +2897,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #495057; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); @@ -2784,6 +2929,7 @@ background: #883cae; color: #ffffff; } + .p-datatable .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -2877,9 +3023,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6c757d; @@ -2889,17 +3035,17 @@ transition: box-shadow 0.15s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #495057; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); @@ -2929,12 +3075,12 @@ background: #883cae; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #efefef; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #ffffff; } .p-datatable .p-datatable-loading-icon { @@ -3037,6 +3183,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -3075,10 +3222,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3106,6 +3255,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3125,6 +3275,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-column-filter-overlay { background: #ffffff; color: #212529; @@ -3162,6 +3313,7 @@ border-top: 1px solid #dee2e6; margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.5rem; border-bottom: 1px solid #dee2e6; @@ -3190,6 +3342,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3275,6 +3428,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #e9ecef; } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1.5rem; box-shadow: none; @@ -3283,6 +3437,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #212529; @@ -3321,6 +3476,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-paginator { background: #ffffff; color: #883cae; @@ -3330,9 +3486,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: #ffffff; border: 1px solid #dee2e6; color: #883cae; @@ -3343,9 +3499,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; border-color: #dee2e6; color: #883cae; @@ -3402,6 +3558,7 @@ border-color: #dee2e6; color: #883cae; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3487,6 +3644,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #e9ecef; } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1.5rem; box-shadow: none; @@ -3495,6 +3653,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3506,19 +3665,20 @@ background-color: #dee2e6; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3575,11 +3735,11 @@ color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3652,6 +3812,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-treetable .p-paginator-top { border-width: 1px 0 0 0; border-radius: 0; @@ -3791,7 +3952,7 @@ background: #883cae; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #efefef; } .p-treetable .p-treetable-loading-icon { @@ -3852,6 +4013,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #efefef; color: #212529; @@ -3876,6 +4038,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem 1.25rem; border: 1px solid #dee2e6; @@ -3948,6 +4111,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #ffffff; color: #212529; @@ -3973,6 +4137,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3996,6 +4161,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -4036,6 +4202,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem 1.25rem; @@ -4102,6 +4269,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #efefef; border: 0 none; @@ -4112,6 +4280,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -4133,6 +4302,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4201,6 +4371,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #efefef; border: 1px solid #dee2e6; @@ -4211,6 +4382,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #212529; @@ -4258,6 +4430,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: none; @@ -4330,6 +4503,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #212529; @@ -4371,6 +4545,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: rgba(0, 0, 0, 0.2); } + .p-sidebar { background: #ffffff; color: #212529; @@ -4381,7 +4556,7 @@ padding: 1rem 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6c757d; @@ -4391,13 +4566,13 @@ transition: box-shadow 0.15s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #495057; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); @@ -4411,6 +4586,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem 1.25rem; } + .p-tooltip .p-tooltip-text { background: #212529; color: #ffffff; @@ -4430,6 +4606,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #212529; } + .p-fileupload .p-fileupload-buttonbar { background: #efefef; padding: 1rem 1.25rem; @@ -4469,6 +4646,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #7a38a7; color: #ffffff; @@ -4479,6 +4657,7 @@ color: #ffffff; border-color: #68329e; } + .p-breadcrumb { background: #efefef; border: 0 none; @@ -4510,6 +4689,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6c757d; } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4557,7 +4737,7 @@ color: #212529; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4571,7 +4751,7 @@ color: #212529; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4582,7 +4762,7 @@ color: #212529; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem-separator { @@ -4596,6 +4776,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4619,31 +4800,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4702,7 +4884,7 @@ color: #212529; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4716,7 +4898,7 @@ color: #212529; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4727,7 +4909,7 @@ color: #212529; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-megamenu-panel { @@ -4785,9 +4967,10 @@ color: rgba(0, 0, 0, 0.7); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.7); } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4824,7 +5007,7 @@ color: #212529; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4838,7 +5021,7 @@ color: #212529; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4849,7 +5032,7 @@ color: #212529; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu.p-menu-overlay { @@ -4883,6 +5066,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem 1rem; background: #efefef; @@ -4921,7 +5105,7 @@ color: rgba(0, 0, 0, 0.7); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.7); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4952,7 +5136,7 @@ color: #212529; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4966,7 +5150,7 @@ color: #212529; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4977,7 +5161,7 @@ color: #212529; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-submenu-list { @@ -4994,6 +5178,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5168,7 +5353,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5182,7 +5367,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5193,7 +5378,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5233,6 +5418,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5275,7 +5461,7 @@ color: #212529; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5289,7 +5475,7 @@ color: #212529; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5300,7 +5486,7 @@ color: #212529; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu.p-slidemenu-overlay { @@ -5347,6 +5533,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.15s; @@ -5391,6 +5578,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #dee2e6; @@ -5461,6 +5649,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5511,7 +5700,7 @@ color: #212529; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5525,7 +5714,7 @@ color: #212529; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5536,7 +5725,7 @@ color: #212529; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem-separator { @@ -5550,6 +5739,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5605,6 +5795,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5693,6 +5884,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5743,7 +5935,7 @@ color: #004085; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #004085; } .p-toast .p-toast-message.p-toast-message-success { @@ -5753,7 +5945,7 @@ color: #155724; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #155724; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5763,7 +5955,7 @@ color: #856404; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #856404; } .p-toast .p-toast-message.p-toast-message-error { @@ -5773,9 +5965,10 @@ color: #721c24; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #721c24; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5806,7 +5999,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5863,7 +6056,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #efefef; @@ -5873,7 +6066,7 @@ border-radius: 4px; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #efefef; } @@ -5882,23 +6075,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5922,6 +6121,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #dee2e6; border-radius: 4px; @@ -5942,9 +6142,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #883cae; color: #ffffff; @@ -5986,6 +6188,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #dee2e6; color: #212529; @@ -6021,6 +6224,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 4px; @@ -6035,6 +6239,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6050,6 +6255,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6071,6 +6277,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e9ecef; border-radius: 4px; @@ -6078,6 +6285,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #883cae; color: #ffffff; @@ -6110,6 +6318,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #212529; diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css index 1840df3c367..224e861ebf7 100644 --- a/src/assets/components/themes/fluent-light/theme.css +++ b/src/assets/components/themes/fluent-light/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #a4252c; } + .p-text-secondary { color: #605e5c; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #a4252c; } + .p-autocomplete-panel { background: #ffffff; color: #323130; @@ -427,9 +440,11 @@ color: #323130; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #a4252c; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -437,19 +452,23 @@ color: #605e5c; right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #605e5c; right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #a4252c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; border-color: #0078d4; } + .p-datepicker { padding: 0.75rem; background: #ffffff; @@ -476,7 +495,7 @@ border-top-left-radius: 2px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #605e5c; @@ -486,13 +505,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #605e5c; border-color: transparent; background: #f3f2f1; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #323130; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #0078d4; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -664,10 +684,12 @@ color: #605e5c; right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #605e5c; right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #a4252c; } + .p-cascadeselect-panel { background: #ffffff; color: #323130; @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #faf9f8; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #faf9f8; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #a4252c; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -768,6 +794,7 @@ color: #605e5c; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #005a9e; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a4252c; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #faf9f8; } @@ -831,12 +861,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #005a9e; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a4252c; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #323130; } @@ -875,9 +908,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #a4252c; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -885,22 +920,26 @@ color: #605e5c; right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px; } + .p-dropdown { background: #ffffff; border: 1px solid #605e5c; @@ -944,6 +983,7 @@ .p-dropdown.p-invalid.p-component { border-color: #a4252c; } + .p-dropdown-panel { background: #ffffff; color: #323130; @@ -1007,6 +1047,7 @@ color: #323130; background: transparent; } + .p-input-filled .p-dropdown { background: #faf9f8; } @@ -1019,9 +1060,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #a4252c; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f2f1; color: #605e5c; @@ -1034,60 +1083,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #605e5c; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: #605e5c; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: #605e5c; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a4252c; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1095,9 +1162,11 @@ color: #605e5c; right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #a4252c; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1105,12 +1174,14 @@ color: #605e5c; right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1149,9 +1220,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #005a9e; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #a4252c; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1184,45 +1257,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: #605e5c; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #a4252c; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: #605e5c; } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: #605e5c; } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: #605e5c; } + :-moz-placeholder { color: #605e5c; } + ::-moz-placeholder { color: #605e5c; } + :-ms-input-placeholder { color: #605e5c; } + .p-input-filled .p-inputtext { background-color: #faf9f8; } @@ -1232,14 +1317,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #faf9f8; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #ffffff; color: #323130; @@ -1314,9 +1402,11 @@ box-shadow: inset 0 0 0 1px #605e5c; border-color: #0078d4; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #a4252c; } + .p-multiselect { background: #ffffff; border: 1px solid #605e5c; @@ -1356,9 +1446,11 @@ border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1366,6 +1458,7 @@ color: #605e5c; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #323130; @@ -1454,6 +1547,7 @@ color: #323130; background: transparent; } + .p-input-filled .p-multiselect { background: #faf9f8; } @@ -1463,12 +1557,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #faf9f8; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #a4252c; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #a4252c; } + .p-password-panel { padding: 1rem; background: #ffffff; @@ -1490,6 +1587,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #498205; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1497,6 +1595,7 @@ color: #605e5c; right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1504,6 +1603,7 @@ color: #605e5c; right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1541,9 +1641,11 @@ background: #ffffff; color: #005a9e; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #a4252c; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #faf9f8; } @@ -1556,9 +1658,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1589,6 +1693,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #a4252c; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #605e5c; @@ -1596,7 +1701,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #605e5c; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1605,7 +1710,7 @@ color: #323130; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #605e5c; } .p-selectbutton .p-button.p-highlight { @@ -1614,7 +1719,7 @@ color: #323130; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #323130; } .p-selectbutton .p-button.p-highlight:hover { @@ -1623,12 +1728,14 @@ color: #323130; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #323130; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #a4252c; } + .p-slider { background: #c8c6c4; border: 0 none; @@ -1680,6 +1787,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #605e5c; @@ -1687,7 +1795,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #605e5c; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1696,7 +1804,7 @@ color: #323130; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #605e5c; } .p-togglebutton.p-button.p-highlight { @@ -1705,7 +1813,7 @@ color: #323130; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #323130; } .p-togglebutton.p-button.p-highlight:hover { @@ -1714,12 +1822,14 @@ color: #323130; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #323130; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #a4252c; } + .p-treeselect { background: #ffffff; border: 1px solid #605e5c; @@ -1756,12 +1866,15 @@ border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #a4252c; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #ffffff; color: #323130; @@ -1821,6 +1934,7 @@ color: #323130; background: transparent; } + .p-input-filled .p-treeselect { background: #faf9f8; } @@ -1830,6 +1944,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #faf9f8; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1837,6 +1952,7 @@ color: #605e5c; right: 2.357rem; } + .p-button { color: #ffffff; background: #0078d4; @@ -1948,7 +2064,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1975,426 +2091,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #d45c00; border: 1px solid #d45c00; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #bf5300; color: #ffffff; border-color: #bf5300; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ffbc88; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #aa4a00; color: #ffffff; border-color: #aa4a00; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #d45c00; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(212, 92, 0, 0.04); color: #d45c00; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(212, 92, 0, 0.16); color: #d45c00; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #d45c00; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(212, 92, 0, 0.04); border-color: transparent; color: #d45c00; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(212, 92, 0, 0.16); border-color: transparent; color: #d45c00; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #00b7c3; border: 1px solid #00b7c3; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #00a5b0; color: #ffffff; border-color: #00a5b0; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #81f7ff; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #00929c; color: #ffffff; border-color: #00929c; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #00b7c3; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(0, 183, 195, 0.04); color: #00b7c3; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(0, 183, 195, 0.16); color: #00b7c3; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #00b7c3; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(0, 183, 195, 0.04); border-color: transparent; color: #00b7c3; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(0, 183, 195, 0.16); border-color: transparent; color: #00b7c3; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #498205; border: 1px solid #498205; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #427505; color: #ffffff; border-color: #427505; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #baf96f; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #3a6804; color: #ffffff; border-color: #3a6804; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #498205; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(73, 130, 5, 0.04); color: #498205; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(73, 130, 5, 0.16); color: #498205; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #498205; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(73, 130, 5, 0.04); border-color: transparent; color: #498205; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(73, 130, 5, 0.16); border-color: transparent; color: #498205; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #323130; background: #ffaa44; border: 1px solid #ffaa44; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ff9b24; color: #323130; border-color: #ff9b24; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ffddb4; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ff8d03; color: #323130; border-color: #ff8d03; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffaa44; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 170, 68, 0.04); color: #ffaa44; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 170, 68, 0.16); color: #ffaa44; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffaa44; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 170, 68, 0.04); border-color: transparent; color: #ffaa44; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 170, 68, 0.16); border-color: transparent; color: #ffaa44; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #8378de; border: 1px solid #8378de; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #6a5dd7; color: #ffffff; border-color: #6a5dd7; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #cdc9f2; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #5141d1; color: #ffffff; border-color: #5141d1; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #8378de; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(131, 120, 222, 0.04); color: #8378de; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(131, 120, 222, 0.16); color: #8378de; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #8378de; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(131, 120, 222, 0.04); border-color: transparent; color: #8378de; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(131, 120, 222, 0.16); border-color: transparent; color: #8378de; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d13438; border: 1px solid #d13438; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c02b2f; color: #ffffff; border-color: #c02b2f; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #edaeaf; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #aa272a; color: #ffffff; border-color: #aa272a; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d13438; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(209, 52, 56, 0.04); color: #d13438; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(209, 52, 56, 0.16); color: #d13438; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d13438; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(209, 52, 56, 0.04); border-color: transparent; color: #d13438; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(209, 52, 56, 0.16); border-color: transparent; color: #d13438; } + .p-button.p-button-link { color: #0078d4; background: transparent; @@ -2418,6 +2542,7 @@ color: #0078d4; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2429,14 +2554,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2447,45 +2575,52 @@ background: #605e5c; color: #ffffff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 2px; } @@ -2563,6 +2698,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #d45c00; @@ -2591,6 +2727,7 @@ border-color: transparent; color: #d45c00; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #00b7c3; @@ -2619,6 +2756,7 @@ border-color: transparent; color: #00b7c3; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #498205; @@ -2647,6 +2785,7 @@ border-color: transparent; color: #498205; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffaa44; @@ -2675,6 +2814,7 @@ border-color: transparent; color: #ffaa44; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #8378de; @@ -2703,6 +2843,7 @@ border-color: transparent; color: #8378de; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d13438; @@ -2731,8 +2872,9 @@ border-color: transparent; color: #d13438; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #605e5c; @@ -2743,13 +2885,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #605e5c; border-color: transparent; background: #f3f2f1; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; @@ -2775,6 +2917,7 @@ background: #edebe9; color: #323130; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2868,9 +3011,9 @@ padding: 0.75rem 0.75rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #605e5c; @@ -2880,17 +3023,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #605e5c; border-color: transparent; background: #f3f2f1; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; @@ -2920,12 +3063,12 @@ background: #0078d4; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #faf9f8; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #ffffff; } .p-datatable .p-datatable-loading-icon { @@ -3028,6 +3171,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.9375rem 0.9375rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3066,10 +3210,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3097,6 +3243,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3116,6 +3263,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-column-filter-overlay { background: #ffffff; color: #323130; @@ -3153,6 +3301,7 @@ border-top: 1px solid #edebe9; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 0.5rem; border-bottom: 1px solid #edebe9; @@ -3181,6 +3330,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3266,6 +3416,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #f3f2f1; } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 0.5rem; box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px; @@ -3274,6 +3425,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f2f1; color: #323130; @@ -3312,6 +3464,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-paginator { background: #ffffff; color: #605e5c; @@ -3321,9 +3474,9 @@ border-radius: 2px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #605e5c; @@ -3334,9 +3487,9 @@ border-radius: 2px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #f3f2f1; border-color: transparent; color: #323130; @@ -3393,6 +3546,7 @@ border-color: transparent; color: #323130; } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3478,6 +3632,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #f3f2f1; } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 0.5rem; box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px; @@ -3486,6 +3641,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3497,19 +3653,20 @@ background-color: #a19f9d; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #a19f9d; background: #ffffff; @@ -3566,11 +3723,11 @@ color: #323130; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #323130; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #323130; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3643,6 +3800,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3782,7 +3940,7 @@ background: #0078d4; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #faf9f8; } .p-treetable .p-treetable-loading-icon { @@ -3843,6 +4001,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.9375rem 0.9375rem; } + .p-virtualscroller .p-virtualscroller-header { background: #ffffff; color: #323130; @@ -3867,6 +4026,7 @@ border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #a19f9d; @@ -3915,6 +4075,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #ffffff; color: #323130; @@ -3940,6 +4101,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3963,6 +4125,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #a19f9d; background: #ffffff; @@ -4003,6 +4166,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #a19f9d; padding: 1rem; @@ -4069,6 +4233,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f3f2f1; border: 0 none; @@ -4079,6 +4244,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-splitter { border: 1px solid #a19f9d; background: #ffffff; @@ -4100,6 +4266,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #edebe9; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4168,6 +4335,7 @@ border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; } + .p-toolbar { background: #faf9f8; border: 1px solid #a19f9d; @@ -4178,6 +4346,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #323130; @@ -4225,6 +4394,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.133) 0px 6.4px 14.4px 0px, rgba(0, 0, 0, 0.11) 0px 1.2px 3.6px 0px; @@ -4297,6 +4467,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #323130; @@ -4338,6 +4509,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #323130; @@ -4348,7 +4520,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #605e5c; @@ -4358,13 +4530,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #605e5c; border-color: transparent; background: #f3f2f1; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; @@ -4378,6 +4550,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #ffffff; color: #323130; @@ -4397,6 +4570,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #ffffff; } + .p-fileupload .p-fileupload-buttonbar { background: #faf9f8; padding: 1rem; @@ -4436,6 +4610,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #106ebe; color: #ffffff; @@ -4446,6 +4621,7 @@ color: #ffffff; border-color: #005a9e; } + .p-breadcrumb { background: #ffffff; border: 1px solid #eeeeee; @@ -4477,6 +4653,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #0078d4; } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4524,7 +4701,7 @@ color: #323130; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4538,7 +4715,7 @@ color: #323130; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #323130; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4549,7 +4726,7 @@ color: #323130; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-contextmenu .p-menuitem-separator { @@ -4563,6 +4740,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4586,31 +4764,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4669,7 +4848,7 @@ color: #323130; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4683,7 +4862,7 @@ color: #323130; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #323130; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4694,7 +4873,7 @@ color: #323130; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-megamenu .p-megamenu-panel { @@ -4752,9 +4931,10 @@ color: #323130; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #0078d4; } + .p-menu { padding: 0; background: #ffffff; @@ -4791,7 +4971,7 @@ color: #323130; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4805,7 +4985,7 @@ color: #323130; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #323130; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4816,7 +4996,7 @@ color: #323130; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-menu.p-menu-overlay { @@ -4850,6 +5030,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4888,7 +5069,7 @@ color: #323130; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4919,7 +5100,7 @@ color: #323130; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4933,7 +5114,7 @@ color: #323130; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #323130; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4944,7 +5125,7 @@ color: #323130; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-menubar .p-submenu-list { @@ -4961,6 +5142,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5135,7 +5317,7 @@ color: #323130; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5149,7 +5331,7 @@ color: #323130; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #323130; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5160,7 +5342,7 @@ color: #323130; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5176,6 +5358,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0; background: #ffffff; @@ -5218,7 +5401,7 @@ color: #323130; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5232,7 +5415,7 @@ color: #323130; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #323130; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5243,7 +5426,7 @@ color: #323130; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-slidemenu.p-slidemenu-overlay { @@ -5290,6 +5473,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5334,6 +5518,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 0 none; @@ -5404,6 +5589,7 @@ outline-offset: 0; box-shadow: inset inset 0 0 0 1px #605e5c; } + .p-tieredmenu { padding: 0; background: #ffffff; @@ -5454,7 +5640,7 @@ color: #323130; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5468,7 +5654,7 @@ color: #323130; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #323130; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5479,7 +5665,7 @@ color: #323130; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #0078d4; } .p-tieredmenu .p-menuitem-separator { @@ -5493,6 +5679,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5548,6 +5735,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 2px; @@ -5636,6 +5824,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5686,7 +5875,7 @@ color: #323130; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #605e5c; } .p-toast .p-toast-message.p-toast-message-success { @@ -5696,7 +5885,7 @@ color: #323130; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #107c10; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5706,7 +5895,7 @@ color: #323130; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #797775; } .p-toast .p-toast-message.p-toast-message-error { @@ -5716,9 +5905,10 @@ color: #323130; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #a80000; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5749,7 +5939,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5806,7 +5996,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #faf9f8; @@ -5816,7 +6006,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #faf9f8; } @@ -5825,23 +6015,29 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5865,6 +6061,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #edebe9; border-radius: 2px; @@ -5885,9 +6082,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #0078d4; color: #ffffff; @@ -5929,6 +6128,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #edebe9; color: #323130; @@ -5964,6 +6164,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 2px; @@ -5978,6 +6179,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-progressbar { border: 0 none; height: 2px; @@ -5993,6 +6195,7 @@ color: #ffffff; line-height: 2px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6014,6 +6217,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #edebe9; border-radius: 2px; @@ -6021,6 +6225,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #0078d4; color: #ffffff; @@ -6053,6 +6258,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #323130; @@ -6070,6 +6276,7 @@ .p-button-label { font-weight: 600; } + .p-slider:not(.p-disabled):hover { background-color: #deecf9; } @@ -6079,6 +6286,7 @@ .p-slider:not(.p-disabled):hover .p-slider-handle { border-color: #005a9e; } + .p-inputswitch { width: 40px; height: 20px; @@ -6106,6 +6314,7 @@ .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { border-color: #0078d4; } + .p-datepicker .p-datepicker-header .p-datepicker-title { order: 1; margin: 0 auto 0 0; @@ -6158,42 +6367,53 @@ .p-datepicker .p-monthpicker .p-monthpicker-month { padding: 0.5rem 0; } + .p-datatable { font-size: 90%; } + .p-toast { font-size: 90%; } .p-toast .p-toast-icon-close-icon { font-size: 90%; } + .p-message { font-size: 90%; } .p-message .p-message-close .p-message-close-icon { font-size: 90%; } + .p-tooltip .p-tooltip-text { font-size: 90%; } + .p-component .p-menu-separator { border-color: #eeeeee; } + .p-submenu-icon { color: #605e5c !important; } + .p-menuitem-active .p-submenu-icon { color: #323130 !important; } + .p-progressbar-label { display: none !important; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #0078d4; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #0078d4; } + .p-inputtext:disabled { background-color: #f3f2f1; border-color: #f3f2f1; @@ -6204,10 +6424,11 @@ .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #0078d4; } + .p-checkbox .p-checkbox-box.p-disabled, - .p-radiobutton .p-radiobutton-box.p-disabled, - .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container.p-disabled, - .p-chips .p-chips-multiple-container.p-disabled { +.p-radiobutton .p-radiobutton-box.p-disabled, +.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container.p-disabled, +.p-chips .p-chips-multiple-container.p-disabled { background-color: #f3f2f1; border-color: #f3f2f1; color: #a19f9d; @@ -6215,13 +6436,14 @@ user-select: none; } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus, - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus, - .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { +.p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus, +.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, +.p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #0078d4; } + .p-dropdown.p-disabled, - .p-multiselect.p-disabled { +.p-multiselect.p-disabled { background-color: #f3f2f1; border-color: #f3f2f1; color: #a19f9d; @@ -6229,20 +6451,22 @@ user-select: none; } .p-dropdown.p-disabled .p-dropdown-label, - .p-dropdown.p-disabled .p-dropdown-trigger-icon, - .p-multiselect.p-disabled .p-dropdown-label, - .p-multiselect.p-disabled .p-dropdown-trigger-icon { +.p-dropdown.p-disabled .p-dropdown-trigger-icon, +.p-multiselect.p-disabled .p-dropdown-label, +.p-multiselect.p-disabled .p-dropdown-trigger-icon { color: #a19f9d; } .p-dropdown:not(.p-disabled).p-focus, - .p-multiselect:not(.p-disabled).p-focus { +.p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #0078d4; } + .p-inputswitch.p-focus .p-inputswitch-slider { box-shadow: none; outline: 1px solid #605e5c; outline-offset: 2px; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #0078d4; } diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css index 50c8d77fcc3..1d1e385e502 100644 --- a/src/assets/components/themes/lara-dark-blue/theme.css +++ b/src/assets/components/themes/lara-dark-blue/theme.css @@ -293,32 +293,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #fca5a5; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -330,12 +338,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .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; @@ -352,6 +363,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -398,6 +410,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-autocomplete-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -444,9 +457,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #fca5a5; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -454,19 +469,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); border-color: #60a5fa; } + .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -493,7 +512,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -503,13 +522,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); @@ -518,14 +537,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #60a5fa; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -674,6 +693,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -681,10 +701,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -727,6 +749,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -766,6 +789,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #424b57; } @@ -775,9 +799,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #fca5a5; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -785,6 +811,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -793,6 +820,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -833,9 +861,11 @@ background: #bfdbfe; color: #030712; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } @@ -848,12 +878,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #bfdbfe; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #60a5fa; } @@ -892,9 +925,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #fca5a5; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -902,22 +937,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1f2937; border: 1px solid #424b57; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #111827; border: 1px solid #424b57; @@ -961,6 +1000,7 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1024,6 +1064,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #424b57; } @@ -1036,9 +1077,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #fca5a5; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1051,60 +1100,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #424b57; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #fca5a5; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1112,9 +1179,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1122,12 +1191,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1166,9 +1237,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #93c5fd; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #fca5a5; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1201,45 +1274,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #fca5a5; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #424b57; } @@ -1249,14 +1334,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #424b57; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1331,9 +1419,11 @@ box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); border-color: #60a5fa; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #fca5a5; } + .p-multiselect { background: #111827; border: 1px solid #424b57; @@ -1373,9 +1463,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1383,6 +1475,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1471,6 +1564,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #424b57; } @@ -1480,12 +1574,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #fca5a5; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #fca5a5; } + .p-password-panel { padding: 1.25rem; background: #1f2937; @@ -1507,6 +1604,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1514,6 +1612,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1521,6 +1620,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1558,9 +1658,11 @@ background: #bfdbfe; color: #030712; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } @@ -1573,9 +1675,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #bfdbfe; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1606,6 +1710,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1f2937; border: 1px solid #424b57; @@ -1613,7 +1718,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1622,7 +1727,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1631,7 +1736,7 @@ color: #030712; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #030712; } .p-selectbutton .p-button.p-highlight:hover { @@ -1640,12 +1745,14 @@ color: #030712; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #030712; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #fca5a5; } + .p-slider { background: #424b57; border: 0 none; @@ -1697,6 +1804,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1f2937; border: 1px solid #424b57; @@ -1704,7 +1812,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1713,7 +1821,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1722,7 +1830,7 @@ color: #030712; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #030712; } .p-togglebutton.p-button.p-highlight:hover { @@ -1731,12 +1839,14 @@ color: #030712; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #030712; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #fca5a5; } + .p-treeselect { background: #111827; border: 1px solid #424b57; @@ -1773,12 +1883,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1838,6 +1951,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #424b57; } @@ -1847,6 +1961,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1854,6 +1969,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-button { color: #030712; background: #60a5fa; @@ -1965,7 +2081,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1992,426 +2108,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #020617; background: #94a3b8; border: 1px solid #94a3b8; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #cbd5e1; color: #020617; border-color: #cbd5e1; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b4bfcd; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #e2e8f0; color: #020617; border-color: #e2e8f0; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(148, 163, 184, 0.16); color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #94a3b8; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); border-color: transparent; color: #94a3b8; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(148, 163, 184, 0.16); border-color: transparent; color: #94a3b8; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #082f49; background: #38bdf8; border: 1px solid #38bdf8; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #7dd3fc; color: #082f49; border-color: #7dd3fc; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #74d1fa; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #bae6fd; color: #082f49; border-color: #bae6fd; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(56, 189, 248, 0.16); color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #38bdf8; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); border-color: transparent; color: #38bdf8; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(56, 189, 248, 0.16); border-color: transparent; color: #38bdf8; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #052e16; background: #4ade80; border: 1px solid #4ade80; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #86efac; color: #052e16; border-color: #86efac; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #80e8a6; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #bbf7d0; color: #052e16; border-color: #bbf7d0; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(74, 222, 128, 0.16); color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #4ade80; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); border-color: transparent; color: #4ade80; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(74, 222, 128, 0.16); border-color: transparent; color: #4ade80; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #431407; background: #fb923c; border: 1px solid #fb923c; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fdba74; color: #431407; border-color: #fdba74; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fcb377; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #fed7aa; color: #431407; border-color: #fed7aa; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 146, 60, 0.16); color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fb923c; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); border-color: transparent; color: #fb923c; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 146, 60, 0.16); border-color: transparent; color: #fb923c; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #3b0764; background: #c084fc; border: 1px solid #c084fc; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #d8b4fe; color: #3b0764; border-color: #d8b4fe; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d3a9fd; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #e9d5ff; color: #3b0764; border-color: #e9d5ff; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(192, 132, 252, 0.16); color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #c084fc; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); border-color: transparent; color: #c084fc; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(192, 132, 252, 0.16); border-color: transparent; color: #c084fc; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #450a0a; background: #f87171; border: 1px solid #f87171; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #fca5a5; color: #450a0a; border-color: #fca5a5; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fa9c9c; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #fecaca; color: #450a0a; border-color: #fecaca; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(248, 113, 113, 0.16); color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f87171; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); border-color: transparent; color: #f87171; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(248, 113, 113, 0.16); border-color: transparent; color: #f87171; } + .p-button.p-button-link { color: #60a5fa; background: transparent; @@ -2435,6 +2559,7 @@ color: #60a5fa; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2446,14 +2571,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2464,45 +2592,52 @@ background: rgba(255, 255, 255, 0.6); color: #111827; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2580,6 +2715,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #94a3b8; @@ -2608,6 +2744,7 @@ border-color: transparent; color: #94a3b8; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #38bdf8; @@ -2636,6 +2773,7 @@ border-color: transparent; color: #38bdf8; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #4ade80; @@ -2664,6 +2802,7 @@ border-color: transparent; color: #4ade80; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fb923c; @@ -2692,6 +2831,7 @@ border-color: transparent; color: #fb923c; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #c084fc; @@ -2720,6 +2860,7 @@ border-color: transparent; color: #c084fc; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f87171; @@ -2748,8 +2889,9 @@ border-color: transparent; color: #f87171; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2760,13 +2902,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); @@ -2792,6 +2934,7 @@ background: rgba(96, 165, 250, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2885,9 +3028,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2897,17 +3040,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); @@ -2937,12 +3080,12 @@ background: #60a5fa; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1f2937; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1f2937; } .p-datatable .p-datatable-loading-icon { @@ -3045,6 +3188,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3083,10 +3227,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3114,6 +3260,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3133,6 +3280,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-column-filter-overlay { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3170,6 +3318,7 @@ border-top: 1px solid #424b57; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #424b57; @@ -3198,6 +3347,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3283,6 +3433,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3291,6 +3442,7 @@ background: #1f2937; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3329,6 +3481,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3338,9 +3491,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3351,9 +3504,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3410,6 +3563,7 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3495,6 +3649,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3503,6 +3658,7 @@ background: #1f2937; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #60a5fa; border-radius: 50%; @@ -3514,19 +3670,20 @@ background-color: #424b57; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3583,11 +3740,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3660,6 +3817,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3799,7 +3957,7 @@ background: #60a5fa; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1f2937; } .p-treetable .p-treetable-loading-icon { @@ -3860,6 +4018,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3884,6 +4043,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3932,6 +4092,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3957,6 +4118,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3980,6 +4142,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -4020,6 +4183,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -4086,6 +4250,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -4096,6 +4261,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -4117,6 +4283,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4185,6 +4352,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -4195,6 +4363,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4242,6 +4411,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4314,6 +4484,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4355,6 +4526,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #424b57; } + .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4365,7 +4537,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4375,13 +4547,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); @@ -4395,6 +4567,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4414,6 +4587,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #424b57; } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4453,6 +4627,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #93c5fd; color: #030712; @@ -4463,6 +4638,7 @@ color: #030712; border-color: #bfdbfe; } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4494,6 +4670,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4541,7 +4718,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4555,7 +4732,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4566,7 +4743,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4580,6 +4757,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4603,31 +4781,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4686,7 +4865,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4700,7 +4879,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4711,7 +4890,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4769,9 +4948,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #374151; @@ -4808,7 +4988,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4822,7 +5002,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4833,7 +5013,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4867,6 +5047,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4905,7 +5086,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,7 +5131,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4961,7 +5142,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4978,6 +5159,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5152,7 +5334,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5166,7 +5348,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5177,7 +5359,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5193,6 +5375,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.25rem 0; background: #374151; @@ -5235,7 +5418,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5249,7 +5432,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5260,7 +5443,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5307,6 +5490,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5351,6 +5535,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -5421,6 +5606,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-tieredmenu { padding: 0.25rem 0; background: #374151; @@ -5471,7 +5657,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5485,7 +5671,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5496,7 +5682,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5510,6 +5696,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5565,6 +5752,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5653,6 +5841,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5703,7 +5892,7 @@ color: #93c5fd; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #93c5fd; } .p-toast .p-toast-message.p-toast-message-success { @@ -5713,7 +5902,7 @@ color: #6ee7b7; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #6ee7b7; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5723,7 +5912,7 @@ color: #fde047; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #fde047; } .p-toast .p-toast-message.p-toast-message-error { @@ -5733,9 +5922,10 @@ color: #fca5a5; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #fca5a5; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5766,7 +5956,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5823,7 +6013,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5833,7 +6023,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5842,23 +6032,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5882,6 +6078,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5902,9 +6099,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1f2937; } + .p-badge { background: #60a5fa; color: #030712; @@ -5946,6 +6145,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5981,6 +6181,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5995,6 +6196,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6010,6 +6212,7 @@ color: #030712; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6031,6 +6234,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -6038,6 +6242,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #60a5fa; color: #030712; @@ -6070,6 +6275,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -6086,25 +6292,32 @@ .p-button-label { font-weight: 700; } + .p-selectbutton > .p-button, - .p-togglebutton.p-button { +.p-togglebutton.p-button { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-accordion .p-accordion-header .p-accordion-header-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #60a5fa; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #60a5fa; } + .p-button:focus { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(96, 165, 250, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } @@ -6126,37 +6339,46 @@ .p-button.p-button-danger:enabled:focus { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(248, 113, 113, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #60a5fa; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #60a5fa; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #60a5fa; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #60a5fa; } + .p-speeddial-item.p-focus > .p-speeddial-action { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(96, 165, 250, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-toast-message { backdrop-filter: blur(10px); } + .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.1); } + .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.1); } + .p-inline-message-text { font-weight: 500; } + .p-picklist-buttons .p-button, - .p-orderlist-controls .p-button { +.p-orderlist-controls .p-button { transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-steps .p-steps-item.p-highlight .p-steps-number { background: #60a5fa; color: #030712; diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css index c1a24e154e7..6485aa86b26 100644 --- a/src/assets/components/themes/lara-dark-indigo/theme.css +++ b/src/assets/components/themes/lara-dark-indigo/theme.css @@ -293,32 +293,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #fca5a5; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -330,12 +338,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .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; @@ -352,6 +363,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -398,6 +410,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-autocomplete-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -444,9 +457,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #fca5a5; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -454,19 +469,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); border-color: #818cf8; } + .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -493,7 +512,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -503,13 +522,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); @@ -518,14 +537,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #818cf8; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -674,6 +693,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -681,10 +701,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -727,6 +749,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -766,6 +789,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #424b57; } @@ -775,9 +799,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #fca5a5; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -785,6 +811,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -793,6 +820,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -833,9 +861,11 @@ background: #c7d2fe; color: #030712; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } @@ -848,12 +878,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #c7d2fe; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #818cf8; } @@ -892,9 +925,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #fca5a5; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -902,22 +937,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1f2937; border: 1px solid #424b57; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #111827; border: 1px solid #424b57; @@ -961,6 +1000,7 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1024,6 +1064,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #424b57; } @@ -1036,9 +1077,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #fca5a5; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1051,60 +1100,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #424b57; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #fca5a5; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1112,9 +1179,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1122,12 +1191,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1166,9 +1237,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #a5b4fc; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #fca5a5; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1201,45 +1274,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #fca5a5; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #424b57; } @@ -1249,14 +1334,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #424b57; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1331,9 +1419,11 @@ box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); border-color: #818cf8; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #fca5a5; } + .p-multiselect { background: #111827; border: 1px solid #424b57; @@ -1373,9 +1463,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1383,6 +1475,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1471,6 +1564,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #424b57; } @@ -1480,12 +1574,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #fca5a5; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #fca5a5; } + .p-password-panel { padding: 1.25rem; background: #1f2937; @@ -1507,6 +1604,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1514,6 +1612,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1521,6 +1620,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1558,9 +1658,11 @@ background: #c7d2fe; color: #030712; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } @@ -1573,9 +1675,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #c7d2fe; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1606,6 +1710,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1f2937; border: 1px solid #424b57; @@ -1613,7 +1718,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1622,7 +1727,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1631,7 +1736,7 @@ color: #030712; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #030712; } .p-selectbutton .p-button.p-highlight:hover { @@ -1640,12 +1745,14 @@ color: #030712; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #030712; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #fca5a5; } + .p-slider { background: #424b57; border: 0 none; @@ -1697,6 +1804,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1f2937; border: 1px solid #424b57; @@ -1704,7 +1812,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1713,7 +1821,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1722,7 +1830,7 @@ color: #030712; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #030712; } .p-togglebutton.p-button.p-highlight:hover { @@ -1731,12 +1839,14 @@ color: #030712; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #030712; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #fca5a5; } + .p-treeselect { background: #111827; border: 1px solid #424b57; @@ -1773,12 +1883,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1838,6 +1951,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #424b57; } @@ -1847,6 +1961,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1854,6 +1969,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-button { color: #030712; background: #818cf8; @@ -1965,7 +2081,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1992,426 +2108,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #020617; background: #94a3b8; border: 1px solid #94a3b8; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #cbd5e1; color: #020617; border-color: #cbd5e1; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b4bfcd; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #e2e8f0; color: #020617; border-color: #e2e8f0; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(148, 163, 184, 0.16); color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #94a3b8; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); border-color: transparent; color: #94a3b8; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(148, 163, 184, 0.16); border-color: transparent; color: #94a3b8; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #082f49; background: #38bdf8; border: 1px solid #38bdf8; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #7dd3fc; color: #082f49; border-color: #7dd3fc; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #74d1fa; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #bae6fd; color: #082f49; border-color: #bae6fd; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(56, 189, 248, 0.16); color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #38bdf8; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); border-color: transparent; color: #38bdf8; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(56, 189, 248, 0.16); border-color: transparent; color: #38bdf8; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #052e16; background: #4ade80; border: 1px solid #4ade80; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #86efac; color: #052e16; border-color: #86efac; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #80e8a6; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #bbf7d0; color: #052e16; border-color: #bbf7d0; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(74, 222, 128, 0.16); color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #4ade80; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); border-color: transparent; color: #4ade80; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(74, 222, 128, 0.16); border-color: transparent; color: #4ade80; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #431407; background: #fb923c; border: 1px solid #fb923c; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fdba74; color: #431407; border-color: #fdba74; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fcb377; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #fed7aa; color: #431407; border-color: #fed7aa; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 146, 60, 0.16); color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fb923c; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); border-color: transparent; color: #fb923c; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 146, 60, 0.16); border-color: transparent; color: #fb923c; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #3b0764; background: #c084fc; border: 1px solid #c084fc; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #d8b4fe; color: #3b0764; border-color: #d8b4fe; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d3a9fd; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #e9d5ff; color: #3b0764; border-color: #e9d5ff; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(192, 132, 252, 0.16); color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #c084fc; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); border-color: transparent; color: #c084fc; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(192, 132, 252, 0.16); border-color: transparent; color: #c084fc; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #450a0a; background: #f87171; border: 1px solid #f87171; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #fca5a5; color: #450a0a; border-color: #fca5a5; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fa9c9c; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #fecaca; color: #450a0a; border-color: #fecaca; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(248, 113, 113, 0.16); color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f87171; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); border-color: transparent; color: #f87171; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(248, 113, 113, 0.16); border-color: transparent; color: #f87171; } + .p-button.p-button-link { color: #818cf8; background: transparent; @@ -2435,6 +2559,7 @@ color: #818cf8; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2446,14 +2571,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2464,45 +2592,52 @@ background: rgba(255, 255, 255, 0.6); color: #111827; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2580,6 +2715,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #94a3b8; @@ -2608,6 +2744,7 @@ border-color: transparent; color: #94a3b8; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #38bdf8; @@ -2636,6 +2773,7 @@ border-color: transparent; color: #38bdf8; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #4ade80; @@ -2664,6 +2802,7 @@ border-color: transparent; color: #4ade80; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fb923c; @@ -2692,6 +2831,7 @@ border-color: transparent; color: #fb923c; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #c084fc; @@ -2720,6 +2860,7 @@ border-color: transparent; color: #c084fc; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f87171; @@ -2748,8 +2889,9 @@ border-color: transparent; color: #f87171; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2760,13 +2902,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); @@ -2792,6 +2934,7 @@ background: rgba(129, 140, 248, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2885,9 +3028,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2897,17 +3040,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); @@ -2937,12 +3080,12 @@ background: #818cf8; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1f2937; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1f2937; } .p-datatable .p-datatable-loading-icon { @@ -3045,6 +3188,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3083,10 +3227,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3114,6 +3260,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3133,6 +3280,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-column-filter-overlay { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3170,6 +3318,7 @@ border-top: 1px solid #424b57; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #424b57; @@ -3198,6 +3347,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3283,6 +3433,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3291,6 +3442,7 @@ background: #1f2937; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3329,6 +3481,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3338,9 +3491,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3351,9 +3504,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3410,6 +3563,7 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3495,6 +3649,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3503,6 +3658,7 @@ background: #1f2937; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #818cf8; border-radius: 50%; @@ -3514,19 +3670,20 @@ background-color: #424b57; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3583,11 +3740,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3660,6 +3817,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3799,7 +3957,7 @@ background: #818cf8; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1f2937; } .p-treetable .p-treetable-loading-icon { @@ -3860,6 +4018,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3884,6 +4043,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3932,6 +4092,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3957,6 +4118,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3980,6 +4142,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -4020,6 +4183,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -4086,6 +4250,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -4096,6 +4261,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -4117,6 +4283,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4185,6 +4352,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -4195,6 +4363,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4242,6 +4411,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4314,6 +4484,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4355,6 +4526,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #424b57; } + .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4365,7 +4537,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4375,13 +4547,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); @@ -4395,6 +4567,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4414,6 +4587,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #424b57; } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4453,6 +4627,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #a5b4fc; color: #030712; @@ -4463,6 +4638,7 @@ color: #030712; border-color: #c7d2fe; } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4494,6 +4670,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4541,7 +4718,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4555,7 +4732,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4566,7 +4743,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4580,6 +4757,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4603,31 +4781,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4686,7 +4865,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4700,7 +4879,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4711,7 +4890,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4769,9 +4948,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #374151; @@ -4808,7 +4988,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4822,7 +5002,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4833,7 +5013,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4867,6 +5047,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4905,7 +5086,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,7 +5131,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4961,7 +5142,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4978,6 +5159,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5152,7 +5334,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5166,7 +5348,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5177,7 +5359,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5193,6 +5375,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.25rem 0; background: #374151; @@ -5235,7 +5418,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5249,7 +5432,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5260,7 +5443,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5307,6 +5490,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5351,6 +5535,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -5421,6 +5606,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-tieredmenu { padding: 0.25rem 0; background: #374151; @@ -5471,7 +5657,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5485,7 +5671,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5496,7 +5682,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5510,6 +5696,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5565,6 +5752,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5653,6 +5841,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5703,7 +5892,7 @@ color: #93c5fd; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #93c5fd; } .p-toast .p-toast-message.p-toast-message-success { @@ -5713,7 +5902,7 @@ color: #6ee7b7; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #6ee7b7; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5723,7 +5912,7 @@ color: #fde047; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #fde047; } .p-toast .p-toast-message.p-toast-message-error { @@ -5733,9 +5922,10 @@ color: #fca5a5; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #fca5a5; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5766,7 +5956,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5823,7 +6013,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5833,7 +6023,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5842,23 +6032,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5882,6 +6078,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5902,9 +6099,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1f2937; } + .p-badge { background: #818cf8; color: #030712; @@ -5946,6 +6145,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5981,6 +6181,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5995,6 +6196,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6010,6 +6212,7 @@ color: #030712; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6031,6 +6234,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -6038,6 +6242,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #818cf8; color: #030712; @@ -6070,6 +6275,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -6086,25 +6292,32 @@ .p-button-label { font-weight: 700; } + .p-selectbutton > .p-button, - .p-togglebutton.p-button { +.p-togglebutton.p-button { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-accordion .p-accordion-header .p-accordion-header-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #818cf8; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #818cf8; } + .p-button:focus { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(129, 140, 248, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } @@ -6126,37 +6339,46 @@ .p-button.p-button-danger:enabled:focus { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(248, 113, 113, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #818cf8; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #818cf8; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #818cf8; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #818cf8; } + .p-speeddial-item.p-focus > .p-speeddial-action { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(129, 140, 248, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-toast-message { backdrop-filter: blur(10px); } + .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.1); } + .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.1); } + .p-inline-message-text { font-weight: 500; } + .p-picklist-buttons .p-button, - .p-orderlist-controls .p-button { +.p-orderlist-controls .p-button { transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-steps .p-steps-item.p-highlight .p-steps-number { background: #818cf8; color: #030712; diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css index 4f483ad2299..896d0787ee9 100644 --- a/src/assets/components/themes/lara-dark-purple/theme.css +++ b/src/assets/components/themes/lara-dark-purple/theme.css @@ -293,32 +293,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #fca5a5; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -330,12 +338,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .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; @@ -352,6 +363,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -398,6 +410,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-autocomplete-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -444,9 +457,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #fca5a5; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -454,19 +469,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); border-color: #a78bfa; } + .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -493,7 +512,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -503,13 +522,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); @@ -518,14 +537,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #a78bfa; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -674,6 +693,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -681,10 +701,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -727,6 +749,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -766,6 +789,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #424b57; } @@ -775,9 +799,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #fca5a5; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -785,6 +811,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -793,6 +820,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -833,9 +861,11 @@ background: #ddd6fe; color: #030712; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } @@ -848,12 +878,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #ddd6fe; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #a78bfa; } @@ -892,9 +925,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #fca5a5; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -902,22 +937,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1f2937; border: 1px solid #424b57; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #111827; border: 1px solid #424b57; @@ -961,6 +1000,7 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1024,6 +1064,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #424b57; } @@ -1036,9 +1077,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #fca5a5; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1051,60 +1100,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #424b57; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #fca5a5; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1112,9 +1179,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1122,12 +1191,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1166,9 +1237,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #c4b5fd; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #fca5a5; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1201,45 +1274,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #fca5a5; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #424b57; } @@ -1249,14 +1334,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #424b57; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1331,9 +1419,11 @@ box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); border-color: #a78bfa; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #fca5a5; } + .p-multiselect { background: #111827; border: 1px solid #424b57; @@ -1373,9 +1463,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1383,6 +1475,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1471,6 +1564,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #424b57; } @@ -1480,12 +1574,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #fca5a5; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #fca5a5; } + .p-password-panel { padding: 1.25rem; background: #1f2937; @@ -1507,6 +1604,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1514,6 +1612,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1521,6 +1620,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1558,9 +1658,11 @@ background: #ddd6fe; color: #030712; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } @@ -1573,9 +1675,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ddd6fe; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1606,6 +1710,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1f2937; border: 1px solid #424b57; @@ -1613,7 +1718,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1622,7 +1727,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1631,7 +1736,7 @@ color: #030712; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #030712; } .p-selectbutton .p-button.p-highlight:hover { @@ -1640,12 +1745,14 @@ color: #030712; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #030712; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #fca5a5; } + .p-slider { background: #424b57; border: 0 none; @@ -1697,6 +1804,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1f2937; border: 1px solid #424b57; @@ -1704,7 +1812,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1713,7 +1821,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1722,7 +1830,7 @@ color: #030712; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #030712; } .p-togglebutton.p-button.p-highlight:hover { @@ -1731,12 +1839,14 @@ color: #030712; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #030712; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #fca5a5; } + .p-treeselect { background: #111827; border: 1px solid #424b57; @@ -1773,12 +1883,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1838,6 +1951,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #424b57; } @@ -1847,6 +1961,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1854,6 +1969,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-button { color: #030712; background: #a78bfa; @@ -1965,7 +2081,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1992,426 +2108,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #020617; background: #94a3b8; border: 1px solid #94a3b8; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #cbd5e1; color: #020617; border-color: #cbd5e1; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b4bfcd; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #e2e8f0; color: #020617; border-color: #e2e8f0; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(148, 163, 184, 0.16); color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #94a3b8; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); border-color: transparent; color: #94a3b8; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(148, 163, 184, 0.16); border-color: transparent; color: #94a3b8; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #082f49; background: #38bdf8; border: 1px solid #38bdf8; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #7dd3fc; color: #082f49; border-color: #7dd3fc; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #74d1fa; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #bae6fd; color: #082f49; border-color: #bae6fd; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(56, 189, 248, 0.16); color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #38bdf8; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); border-color: transparent; color: #38bdf8; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(56, 189, 248, 0.16); border-color: transparent; color: #38bdf8; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #052e16; background: #4ade80; border: 1px solid #4ade80; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #86efac; color: #052e16; border-color: #86efac; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #80e8a6; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #bbf7d0; color: #052e16; border-color: #bbf7d0; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(74, 222, 128, 0.16); color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #4ade80; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); border-color: transparent; color: #4ade80; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(74, 222, 128, 0.16); border-color: transparent; color: #4ade80; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #431407; background: #fb923c; border: 1px solid #fb923c; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fdba74; color: #431407; border-color: #fdba74; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fcb377; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #fed7aa; color: #431407; border-color: #fed7aa; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 146, 60, 0.16); color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fb923c; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); border-color: transparent; color: #fb923c; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 146, 60, 0.16); border-color: transparent; color: #fb923c; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #3b0764; background: #c084fc; border: 1px solid #c084fc; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #d8b4fe; color: #3b0764; border-color: #d8b4fe; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d3a9fd; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #e9d5ff; color: #3b0764; border-color: #e9d5ff; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(192, 132, 252, 0.16); color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #c084fc; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); border-color: transparent; color: #c084fc; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(192, 132, 252, 0.16); border-color: transparent; color: #c084fc; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #450a0a; background: #f87171; border: 1px solid #f87171; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #fca5a5; color: #450a0a; border-color: #fca5a5; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fa9c9c; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #fecaca; color: #450a0a; border-color: #fecaca; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(248, 113, 113, 0.16); color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f87171; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); border-color: transparent; color: #f87171; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(248, 113, 113, 0.16); border-color: transparent; color: #f87171; } + .p-button.p-button-link { color: #a78bfa; background: transparent; @@ -2435,6 +2559,7 @@ color: #a78bfa; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2446,14 +2571,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2464,45 +2592,52 @@ background: rgba(255, 255, 255, 0.6); color: #111827; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2580,6 +2715,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #94a3b8; @@ -2608,6 +2744,7 @@ border-color: transparent; color: #94a3b8; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #38bdf8; @@ -2636,6 +2773,7 @@ border-color: transparent; color: #38bdf8; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #4ade80; @@ -2664,6 +2802,7 @@ border-color: transparent; color: #4ade80; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fb923c; @@ -2692,6 +2831,7 @@ border-color: transparent; color: #fb923c; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #c084fc; @@ -2720,6 +2860,7 @@ border-color: transparent; color: #c084fc; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f87171; @@ -2748,8 +2889,9 @@ border-color: transparent; color: #f87171; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2760,13 +2902,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); @@ -2792,6 +2934,7 @@ background: rgba(167, 139, 250, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2885,9 +3028,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2897,17 +3040,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); @@ -2937,12 +3080,12 @@ background: #a78bfa; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1f2937; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1f2937; } .p-datatable .p-datatable-loading-icon { @@ -3045,6 +3188,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3083,10 +3227,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3114,6 +3260,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3133,6 +3280,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-column-filter-overlay { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3170,6 +3318,7 @@ border-top: 1px solid #424b57; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #424b57; @@ -3198,6 +3347,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3283,6 +3433,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3291,6 +3442,7 @@ background: #1f2937; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3329,6 +3481,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3338,9 +3491,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3351,9 +3504,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3410,6 +3563,7 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3495,6 +3649,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3503,6 +3658,7 @@ background: #1f2937; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #a78bfa; border-radius: 50%; @@ -3514,19 +3670,20 @@ background-color: #424b57; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3583,11 +3740,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3660,6 +3817,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3799,7 +3957,7 @@ background: #a78bfa; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1f2937; } .p-treetable .p-treetable-loading-icon { @@ -3860,6 +4018,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3884,6 +4043,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3932,6 +4092,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3957,6 +4118,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3980,6 +4142,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -4020,6 +4183,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -4086,6 +4250,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -4096,6 +4261,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -4117,6 +4283,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4185,6 +4352,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -4195,6 +4363,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4242,6 +4411,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4314,6 +4484,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4355,6 +4526,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #424b57; } + .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4365,7 +4537,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4375,13 +4547,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); @@ -4395,6 +4567,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4414,6 +4587,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #424b57; } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4453,6 +4627,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #c4b5fd; color: #030712; @@ -4463,6 +4638,7 @@ color: #030712; border-color: #ddd6fe; } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4494,6 +4670,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4541,7 +4718,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4555,7 +4732,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4566,7 +4743,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4580,6 +4757,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4603,31 +4781,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4686,7 +4865,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4700,7 +4879,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4711,7 +4890,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4769,9 +4948,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #374151; @@ -4808,7 +4988,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4822,7 +5002,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4833,7 +5013,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4867,6 +5047,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4905,7 +5086,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,7 +5131,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4961,7 +5142,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4978,6 +5159,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5152,7 +5334,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5166,7 +5348,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5177,7 +5359,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5193,6 +5375,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.25rem 0; background: #374151; @@ -5235,7 +5418,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5249,7 +5432,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5260,7 +5443,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5307,6 +5490,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5351,6 +5535,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -5421,6 +5606,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-tieredmenu { padding: 0.25rem 0; background: #374151; @@ -5471,7 +5657,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5485,7 +5671,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5496,7 +5682,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5510,6 +5696,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5565,6 +5752,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5653,6 +5841,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5703,7 +5892,7 @@ color: #93c5fd; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #93c5fd; } .p-toast .p-toast-message.p-toast-message-success { @@ -5713,7 +5902,7 @@ color: #6ee7b7; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #6ee7b7; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5723,7 +5912,7 @@ color: #fde047; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #fde047; } .p-toast .p-toast-message.p-toast-message-error { @@ -5733,9 +5922,10 @@ color: #fca5a5; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #fca5a5; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5766,7 +5956,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5823,7 +6013,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5833,7 +6023,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5842,23 +6032,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5882,6 +6078,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5902,9 +6099,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1f2937; } + .p-badge { background: #a78bfa; color: #030712; @@ -5946,6 +6145,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5981,6 +6181,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5995,6 +6196,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6010,6 +6212,7 @@ color: #030712; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6031,6 +6234,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -6038,6 +6242,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #a78bfa; color: #030712; @@ -6070,6 +6275,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -6086,25 +6292,32 @@ .p-button-label { font-weight: 700; } + .p-selectbutton > .p-button, - .p-togglebutton.p-button { +.p-togglebutton.p-button { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-accordion .p-accordion-header .p-accordion-header-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #a78bfa; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #a78bfa; } + .p-button:focus { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(167, 139, 250, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } @@ -6126,37 +6339,46 @@ .p-button.p-button-danger:enabled:focus { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(248, 113, 113, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #a78bfa; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #a78bfa; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #a78bfa; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #a78bfa; } + .p-speeddial-item.p-focus > .p-speeddial-action { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(167, 139, 250, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-toast-message { backdrop-filter: blur(10px); } + .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.1); } + .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.1); } + .p-inline-message-text { font-weight: 500; } + .p-picklist-buttons .p-button, - .p-orderlist-controls .p-button { +.p-orderlist-controls .p-button { transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-steps .p-steps-item.p-highlight .p-steps-number { background: #a78bfa; color: #030712; diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css index a474e6321e4..2bbd2c66490 100644 --- a/src/assets/components/themes/lara-dark-teal/theme.css +++ b/src/assets/components/themes/lara-dark-teal/theme.css @@ -293,32 +293,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #fca5a5; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -330,12 +338,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .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; @@ -352,6 +363,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -398,6 +410,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-autocomplete-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -444,9 +457,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #fca5a5; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -454,19 +469,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #fca5a5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); border-color: #2dd4bf; } + .p-datepicker { padding: 0.5rem; background: #1f2937; @@ -493,7 +512,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -503,13 +522,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); @@ -518,14 +537,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #2dd4bf; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -674,6 +693,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -681,10 +701,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -727,6 +749,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -766,6 +789,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #424b57; } @@ -775,9 +799,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #fca5a5; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -785,6 +811,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -793,6 +820,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -833,9 +861,11 @@ background: #99f6e4; color: #030712; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } @@ -848,12 +878,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #99f6e4; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #2dd4bf; } @@ -892,9 +925,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #fca5a5; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -902,22 +937,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1f2937; border: 1px solid #424b57; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #111827; border: 1px solid #424b57; @@ -961,6 +1000,7 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1024,6 +1064,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #424b57; } @@ -1036,9 +1077,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #fca5a5; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1051,60 +1100,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #424b57; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #fca5a5; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1112,9 +1179,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1122,12 +1191,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1166,9 +1237,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #5eead4; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #fca5a5; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1201,45 +1274,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #fca5a5; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #424b57; } @@ -1249,14 +1334,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #424b57; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1331,9 +1419,11 @@ box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); border-color: #2dd4bf; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #fca5a5; } + .p-multiselect { background: #111827; border: 1px solid #424b57; @@ -1373,9 +1463,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1383,6 +1475,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1471,6 +1564,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #424b57; } @@ -1480,12 +1574,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #fca5a5; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #fca5a5; } + .p-password-panel { padding: 1.25rem; background: #1f2937; @@ -1507,6 +1604,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1514,6 +1612,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1521,6 +1620,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1558,9 +1658,11 @@ background: #99f6e4; color: #030712; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } @@ -1573,9 +1675,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #99f6e4; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1606,6 +1710,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1f2937; border: 1px solid #424b57; @@ -1613,7 +1718,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1622,7 +1727,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1631,7 +1736,7 @@ color: #030712; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #030712; } .p-selectbutton .p-button.p-highlight:hover { @@ -1640,12 +1745,14 @@ color: #030712; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #030712; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #fca5a5; } + .p-slider { background: #424b57; border: 0 none; @@ -1697,6 +1804,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1f2937; border: 1px solid #424b57; @@ -1704,7 +1812,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1713,7 +1821,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1722,7 +1830,7 @@ color: #030712; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #030712; } .p-togglebutton.p-button.p-highlight:hover { @@ -1731,12 +1839,14 @@ color: #030712; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #030712; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #fca5a5; } + .p-treeselect { background: #111827; border: 1px solid #424b57; @@ -1773,12 +1883,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1838,6 +1951,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #424b57; } @@ -1847,6 +1961,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #424b57; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1854,6 +1969,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-button { color: #030712; background: #2dd4bf; @@ -1965,7 +2081,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1992,426 +2108,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #020617; background: #94a3b8; border: 1px solid #94a3b8; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #cbd5e1; color: #020617; border-color: #cbd5e1; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b4bfcd; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #e2e8f0; color: #020617; border-color: #e2e8f0; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(148, 163, 184, 0.16); color: #94a3b8; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #94a3b8; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(148, 163, 184, 0.04); border-color: transparent; color: #94a3b8; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(148, 163, 184, 0.16); border-color: transparent; color: #94a3b8; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #082f49; background: #38bdf8; border: 1px solid #38bdf8; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #7dd3fc; color: #082f49; border-color: #7dd3fc; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #74d1fa; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #bae6fd; color: #082f49; border-color: #bae6fd; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(56, 189, 248, 0.16); color: #38bdf8; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #38bdf8; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(56, 189, 248, 0.04); border-color: transparent; color: #38bdf8; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(56, 189, 248, 0.16); border-color: transparent; color: #38bdf8; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #052e16; background: #4ade80; border: 1px solid #4ade80; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #86efac; color: #052e16; border-color: #86efac; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #80e8a6; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #bbf7d0; color: #052e16; border-color: #bbf7d0; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(74, 222, 128, 0.16); color: #4ade80; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #4ade80; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(74, 222, 128, 0.04); border-color: transparent; color: #4ade80; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(74, 222, 128, 0.16); border-color: transparent; color: #4ade80; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #431407; background: #fb923c; border: 1px solid #fb923c; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fdba74; color: #431407; border-color: #fdba74; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fcb377; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #fed7aa; color: #431407; border-color: #fed7aa; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 146, 60, 0.16); color: #fb923c; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fb923c; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 146, 60, 0.04); border-color: transparent; color: #fb923c; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 146, 60, 0.16); border-color: transparent; color: #fb923c; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #3b0764; background: #c084fc; border: 1px solid #c084fc; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #d8b4fe; color: #3b0764; border-color: #d8b4fe; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d3a9fd; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #e9d5ff; color: #3b0764; border-color: #e9d5ff; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(192, 132, 252, 0.16); color: #c084fc; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #c084fc; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(192, 132, 252, 0.04); border-color: transparent; color: #c084fc; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(192, 132, 252, 0.16); border-color: transparent; color: #c084fc; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #450a0a; background: #f87171; border: 1px solid #f87171; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #fca5a5; color: #450a0a; border-color: #fca5a5; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fa9c9c; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #fecaca; color: #450a0a; border-color: #fecaca; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(248, 113, 113, 0.16); color: #f87171; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f87171; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(248, 113, 113, 0.04); border-color: transparent; color: #f87171; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(248, 113, 113, 0.16); border-color: transparent; color: #f87171; } + .p-button.p-button-link { color: #2dd4bf; background: transparent; @@ -2435,6 +2559,7 @@ color: #2dd4bf; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2446,14 +2571,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2464,45 +2592,52 @@ background: rgba(255, 255, 255, 0.6); color: #111827; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2580,6 +2715,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #94a3b8; @@ -2608,6 +2744,7 @@ border-color: transparent; color: #94a3b8; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #38bdf8; @@ -2636,6 +2773,7 @@ border-color: transparent; color: #38bdf8; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #4ade80; @@ -2664,6 +2802,7 @@ border-color: transparent; color: #4ade80; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fb923c; @@ -2692,6 +2831,7 @@ border-color: transparent; color: #fb923c; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #c084fc; @@ -2720,6 +2860,7 @@ border-color: transparent; color: #c084fc; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f87171; @@ -2748,8 +2889,9 @@ border-color: transparent; color: #f87171; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2760,13 +2902,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); @@ -2792,6 +2934,7 @@ background: rgba(45, 212, 191, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2885,9 +3028,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2897,17 +3040,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); @@ -2937,12 +3080,12 @@ background: #2dd4bf; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1f2937; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1f2937; } .p-datatable .p-datatable-loading-icon { @@ -3045,6 +3188,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3083,10 +3227,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3114,6 +3260,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3133,6 +3280,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-column-filter-overlay { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3170,6 +3318,7 @@ border-top: 1px solid #424b57; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #424b57; @@ -3198,6 +3347,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3283,6 +3433,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3291,6 +3442,7 @@ background: #1f2937; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3329,6 +3481,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-paginator { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3338,9 +3491,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3351,9 +3504,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3410,6 +3563,7 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3495,6 +3649,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3503,6 +3658,7 @@ background: #1f2937; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #2dd4bf; border-radius: 50%; @@ -3514,19 +3670,20 @@ background-color: #424b57; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3583,11 +3740,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3660,6 +3817,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3799,7 +3957,7 @@ background: #2dd4bf; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1f2937; } .p-treetable .p-treetable-loading-icon { @@ -3860,6 +4018,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -3884,6 +4043,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #424b57; @@ -3932,6 +4092,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -3957,6 +4118,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1f2937; } @@ -3980,6 +4142,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #424b57; background: #1f2937; @@ -4020,6 +4183,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #424b57; padding: 1.25rem; @@ -4086,6 +4250,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -4096,6 +4261,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-splitter { border: 1px solid #424b57; background: #1f2937; @@ -4117,6 +4283,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4185,6 +4352,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #1f2937; border: 1px solid #424b57; @@ -4195,6 +4363,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4242,6 +4411,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4314,6 +4484,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4355,6 +4526,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #424b57; } + .p-sidebar { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -4365,7 +4537,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4375,13 +4547,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); @@ -4395,6 +4567,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #424b57; color: rgba(255, 255, 255, 0.87); @@ -4414,6 +4587,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #424b57; } + .p-fileupload .p-fileupload-buttonbar { background: #1f2937; padding: 1.25rem; @@ -4453,6 +4627,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #5eead4; color: #030712; @@ -4463,6 +4638,7 @@ color: #030712; border-color: #99f6e4; } + .p-breadcrumb { background: #374151; border: 1px solid #424b57; @@ -4494,6 +4670,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #374151; @@ -4541,7 +4718,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4555,7 +4732,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4566,7 +4743,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4580,6 +4757,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4603,31 +4781,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4686,7 +4865,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4700,7 +4879,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4711,7 +4890,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4769,9 +4948,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #374151; @@ -4808,7 +4988,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4822,7 +5002,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4833,7 +5013,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4867,6 +5047,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #374151; @@ -4905,7 +5086,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,7 +5131,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4961,7 +5142,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4978,6 +5159,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5152,7 +5334,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5166,7 +5348,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5177,7 +5359,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5193,6 +5375,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.25rem 0; background: #374151; @@ -5235,7 +5418,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5249,7 +5432,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5260,7 +5443,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5307,6 +5490,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5351,6 +5535,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #424b57; @@ -5421,6 +5606,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-tieredmenu { padding: 0.25rem 0; background: #374151; @@ -5471,7 +5657,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5485,7 +5671,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5496,7 +5682,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5510,6 +5696,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5565,6 +5752,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5653,6 +5841,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5703,7 +5892,7 @@ color: #93c5fd; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #93c5fd; } .p-toast .p-toast-message.p-toast-message-success { @@ -5713,7 +5902,7 @@ color: #6ee7b7; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #6ee7b7; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5723,7 +5912,7 @@ color: #fde047; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #fde047; } .p-toast .p-toast-message.p-toast-message-error { @@ -5733,9 +5922,10 @@ color: #fca5a5; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #fca5a5; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5766,7 +5956,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5823,7 +6013,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5833,7 +6023,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5842,23 +6032,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5882,6 +6078,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #424b57; border-radius: 6px; @@ -5902,9 +6099,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1f2937; } + .p-badge { background: #2dd4bf; color: #030712; @@ -5946,6 +6145,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #424b57; color: rgba(255, 255, 255, 0.87); @@ -5981,6 +6181,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5995,6 +6196,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6010,6 +6212,7 @@ color: #030712; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6031,6 +6234,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -6038,6 +6242,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #2dd4bf; color: #030712; @@ -6070,6 +6275,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -6086,25 +6292,32 @@ .p-button-label { font-weight: 700; } + .p-selectbutton > .p-button, - .p-togglebutton.p-button { +.p-togglebutton.p-button { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-accordion .p-accordion-header .p-accordion-header-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #2dd4bf; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #2dd4bf; } + .p-button:focus { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(45, 212, 191, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } @@ -6126,37 +6339,46 @@ .p-button.p-button-danger:enabled:focus { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(248, 113, 113, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #2dd4bf; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #2dd4bf; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #2dd4bf; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #2dd4bf; } + .p-speeddial-item.p-focus > .p-speeddial-action { box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(45, 212, 191, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-toast-message { backdrop-filter: blur(10px); } + .p-message .p-message-close:hover { background: rgba(255, 255, 255, 0.1); } + .p-toast .p-toast-message .p-toast-icon-close:hover { background: rgba(255, 255, 255, 0.1); } + .p-inline-message-text { font-weight: 500; } + .p-picklist-buttons .p-button, - .p-orderlist-controls .p-button { +.p-orderlist-controls .p-button { transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-steps .p-steps-item.p-highlight .p-steps-number { background: #2dd4bf; color: #030712; diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css index c0f07072f96..7f067f10133 100644 --- a/src/assets/components/themes/lara-light-blue/theme.css +++ b/src/assets/components/themes/lara-light-blue/theme.css @@ -293,32 +293,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #e24c4c; } + .p-text-secondary { color: #6b7280; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -330,12 +338,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .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; @@ -352,6 +363,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -398,6 +410,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-autocomplete-panel { background: #ffffff; color: #4b5563; @@ -444,9 +457,11 @@ color: #4b5563; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e24c4c; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -454,19 +469,23 @@ color: #6b7280; right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #6b7280; right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; border-color: #3B82F6; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -493,7 +512,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6b7280; @@ -503,13 +522,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; @@ -518,14 +537,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #4b5563; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #3B82F6; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -674,6 +693,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -681,10 +701,12 @@ color: #6b7280; right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #6b7280; right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -727,6 +749,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e24c4c; } + .p-cascadeselect-panel { background: #ffffff; color: #4b5563; @@ -766,6 +789,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f3f4f6; } @@ -775,9 +799,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e24c4c; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -785,6 +811,7 @@ color: #6b7280; right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -793,6 +820,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -833,9 +861,11 @@ background: #1D4ED8; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } @@ -848,12 +878,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #1D4ED8; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #3B82F6; } @@ -892,9 +925,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #e24c4c; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -902,22 +937,26 @@ color: #6b7280; right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; @@ -961,6 +1000,7 @@ .p-dropdown.p-invalid.p-component { border-color: #e24c4c; } + .p-dropdown-panel { background: #ffffff; color: #4b5563; @@ -1024,6 +1064,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-dropdown { background: #f3f4f6; } @@ -1036,9 +1077,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #e24c4c; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1051,60 +1100,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #d1d5db; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1112,9 +1179,11 @@ color: #6b7280; right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e24c4c; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1122,12 +1191,14 @@ color: #6b7280; right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1166,9 +1237,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #2563eb; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e24c4c; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1201,45 +1274,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: #6b7280; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #e24c4c; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: #6b7280; } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: #6b7280; } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: #6b7280; } + :-moz-placeholder { color: #6b7280; } + ::-moz-placeholder { color: #6b7280; } + :-ms-input-placeholder { color: #6b7280; } + .p-input-filled .p-inputtext { background-color: #f3f4f6; } @@ -1249,14 +1334,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #ffffff; color: #4b5563; @@ -1331,9 +1419,11 @@ box-shadow: 0 0 0 0.2rem #BFDBFE; border-color: #3B82F6; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #e24c4c; } + .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1373,9 +1463,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1383,6 +1475,7 @@ color: #6b7280; right: 3rem; } + .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1471,6 +1564,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-multiselect { background: #f3f4f6; } @@ -1480,12 +1574,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #e24c4c; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #e24c4c; } + .p-password-panel { padding: 1.25rem; background: #ffffff; @@ -1507,6 +1604,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1514,6 +1612,7 @@ color: #6b7280; right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1521,6 +1620,7 @@ color: #6b7280; right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1558,9 +1658,11 @@ background: #1D4ED8; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e24c4c; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } @@ -1573,9 +1675,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #1D4ED8; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1606,6 +1710,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #e73d3e; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #d1d5db; @@ -1613,7 +1718,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #6b7280; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1622,7 +1727,7 @@ color: #4b5563; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #374151; } .p-selectbutton .p-button.p-highlight { @@ -1631,7 +1736,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1640,12 +1745,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #e24c4c; } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1697,6 +1804,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #d1d5db; @@ -1704,7 +1812,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #6b7280; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1713,7 +1821,7 @@ color: #4b5563; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #374151; } .p-togglebutton.p-button.p-highlight { @@ -1722,7 +1830,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1731,12 +1839,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #e24c4c; } + .p-treeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1773,12 +1883,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e24c4c; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: #4b5563; @@ -1838,6 +1951,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-treeselect { background: #f3f4f6; } @@ -1847,6 +1961,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1854,6 +1969,7 @@ color: #6b7280; right: 3rem; } + .p-button { color: #ffffff; background: #3B82F6; @@ -1965,7 +2081,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1992,426 +2108,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #64748b; border: 1px solid #64748b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #475569; color: #ffffff; border-color: #475569; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e2e8f0; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #334155; color: #ffffff; border-color: #334155; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(100, 116, 139, 0.16); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #64748b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); border-color: transparent; color: #64748b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(100, 116, 139, 0.16); border-color: transparent; color: #64748b; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0ea5e9; border: 1px solid #0ea5e9; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #0284c7; color: #ffffff; border-color: #0284c7; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bfdbfe; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #0369a1; color: #ffffff; border-color: #0369a1; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(14, 165, 233, 0.16); color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0ea5e9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); border-color: transparent; color: #0ea5e9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(14, 165, 233, 0.16); border-color: transparent; color: #0ea5e9; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #22c55e; border: 1px solid #22c55e; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #16a34a; color: #ffffff; border-color: #16a34a; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bbf7d0; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #15803d; color: #ffffff; border-color: #15803d; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(34, 197, 94, 0.16); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #22c55e; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); border-color: transparent; color: #22c55e; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(34, 197, 94, 0.16); border-color: transparent; color: #22c55e; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #f97316; border: 1px solid #f97316; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ea580c; color: #ffffff; border-color: #ea580c; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde68a; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #c2410c; color: #ffffff; border-color: #c2410c; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(249, 115, 22, 0.16); color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #f97316; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); border-color: transparent; color: #f97316; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(249, 115, 22, 0.16); border-color: transparent; color: #f97316; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #a855f7; border: 1px solid #a855f7; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #9333ea; color: #ffffff; border-color: #9333ea; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e9d5ff; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7e22ce; color: #ffffff; border-color: #7e22ce; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(168, 85, 247, 0.16); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #a855f7; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); border-color: transparent; color: #a855f7; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(168, 85, 247, 0.16); border-color: transparent; color: #a855f7; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #ef4444; border: 1px solid #ef4444; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #dc2626; color: #ffffff; border-color: #dc2626; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fecaca; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #b91c1c; color: #ffffff; border-color: #b91c1c; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 68, 68, 0.16); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef4444; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); border-color: transparent; color: #ef4444; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 68, 68, 0.16); border-color: transparent; color: #ef4444; } + .p-button.p-button-link { color: #1D4ED8; background: transparent; @@ -2435,6 +2559,7 @@ color: #1D4ED8; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2446,14 +2571,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2464,45 +2592,52 @@ background: #022354; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2580,6 +2715,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #64748b; @@ -2608,6 +2744,7 @@ border-color: transparent; color: #64748b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #0ea5e9; @@ -2636,6 +2773,7 @@ border-color: transparent; color: #0ea5e9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #22c55e; @@ -2664,6 +2802,7 @@ border-color: transparent; color: #22c55e; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #f97316; @@ -2692,6 +2831,7 @@ border-color: transparent; color: #f97316; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #a855f7; @@ -2720,6 +2860,7 @@ border-color: transparent; color: #a855f7; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ef4444; @@ -2748,8 +2889,9 @@ border-color: transparent; color: #ef4444; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6b7280; @@ -2760,13 +2902,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; @@ -2792,6 +2934,7 @@ background: #EFF6FF; color: #1D4ED8; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2885,9 +3028,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6b7280; @@ -2897,17 +3040,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; @@ -2937,12 +3080,12 @@ background: #3B82F6; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f9fafb; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f9fafb; } .p-datatable .p-datatable-loading-icon { @@ -3045,6 +3188,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3083,10 +3227,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3114,6 +3260,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3133,6 +3280,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-column-filter-overlay { background: #ffffff; color: #4b5563; @@ -3170,6 +3318,7 @@ border-top: 1px solid #e5e7eb; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #e5e7eb; @@ -3198,6 +3347,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3283,6 +3433,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #f3f4f6; } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3291,6 +3442,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3329,6 +3481,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3338,9 +3491,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #6b7280; @@ -3351,9 +3504,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #f3f4f6; border-color: transparent; color: #374151; @@ -3410,6 +3563,7 @@ border-color: transparent; color: #374151; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3495,6 +3649,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #f3f4f6; } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3503,6 +3658,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #3B82F6; border-radius: 50%; @@ -3514,19 +3670,20 @@ background-color: #e5e7eb; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3583,11 +3740,11 @@ color: #1D4ED8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #1D4ED8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #1D4ED8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3660,6 +3817,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3799,7 +3957,7 @@ background: #3B82F6; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f9fafb; } .p-treetable .p-treetable-loading-icon { @@ -3860,6 +4018,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f9fafb; color: #374151; @@ -3884,6 +4043,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3932,6 +4092,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #ffffff; color: #4b5563; @@ -3957,6 +4118,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3980,6 +4142,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -4020,6 +4183,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -4086,6 +4250,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -4096,6 +4261,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -4117,6 +4283,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4185,6 +4352,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -4195,6 +4363,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -4242,6 +4411,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -4314,6 +4484,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4355,6 +4526,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #4b5563; @@ -4365,7 +4537,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6b7280; @@ -4375,13 +4547,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; @@ -4395,6 +4567,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4414,6 +4587,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #4b5563; } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4453,6 +4627,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #2563eb; color: #ffffff; @@ -4463,6 +4638,7 @@ color: #ffffff; border-color: #1D4ED8; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4494,6 +4670,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6b7280; } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4541,7 +4718,7 @@ color: #1D4ED8; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #1D4ED8; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4555,7 +4732,7 @@ color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4566,7 +4743,7 @@ color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-contextmenu .p-menuitem-separator { @@ -4580,6 +4757,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4603,31 +4781,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4686,7 +4865,7 @@ color: #1D4ED8; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #1D4ED8; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4700,7 +4879,7 @@ color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4711,7 +4890,7 @@ color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-megamenu .p-megamenu-panel { @@ -4769,9 +4948,10 @@ color: #4b5563; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4808,7 +4988,7 @@ color: #1D4ED8; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #1D4ED8; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4822,7 +5002,7 @@ color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4833,7 +5013,7 @@ color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menu.p-menu-overlay { @@ -4867,6 +5047,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4905,7 +5086,7 @@ color: #4b5563; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: #1D4ED8; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #1D4ED8; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,7 +5131,7 @@ color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4961,7 +5142,7 @@ color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-submenu-list { @@ -4978,6 +5159,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5152,7 +5334,7 @@ color: #1D4ED8; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #1D4ED8; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5166,7 +5348,7 @@ color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5177,7 +5359,7 @@ color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5193,6 +5375,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5235,7 +5418,7 @@ color: #1D4ED8; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #1D4ED8; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5249,7 +5432,7 @@ color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5260,7 +5443,7 @@ color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-slidemenu.p-slidemenu-overlay { @@ -5307,6 +5490,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5351,6 +5535,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5421,6 +5606,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #BFDBFE; } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5471,7 +5657,7 @@ color: #1D4ED8; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #1D4ED8; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5485,7 +5671,7 @@ color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5496,7 +5682,7 @@ color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-tieredmenu .p-menuitem-separator { @@ -5510,6 +5696,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5565,6 +5752,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5653,6 +5841,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5703,7 +5892,7 @@ color: #3b82f6; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #3b82f6; } .p-toast .p-toast-message.p-toast-message-success { @@ -5713,7 +5902,7 @@ color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5723,7 +5912,7 @@ color: #cc8925; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #cc8925; } .p-toast .p-toast-message.p-toast-message-error { @@ -5733,9 +5922,10 @@ color: #ff5757; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #ff5757; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5766,7 +5956,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5823,7 +6013,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f9fafb; @@ -5833,7 +6023,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f9fafb; } @@ -5842,23 +6032,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5882,6 +6078,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5902,9 +6099,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #3B82F6; color: #ffffff; @@ -5946,6 +6145,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5981,6 +6181,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5995,6 +6196,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #BFDBFE; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6010,6 +6212,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6031,6 +6234,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -6038,6 +6242,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #3B82F6; color: #ffffff; @@ -6070,6 +6275,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #4b5563; @@ -6086,65 +6292,78 @@ .p-button-label { font-weight: 700; } + .p-selectbutton > .p-button, - .p-togglebutton.p-button { +.p-togglebutton.p-button { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-accordion .p-accordion-header .p-accordion-header-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #3B82F6; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #3B82F6; } + .p-button:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black; } .p-button.p-button-secondary:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black; } .p-button.p-button-success:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; } .p-button.p-button-info:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 black; } .p-button.p-button-warning:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 black; } .p-button.p-button-help:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; } .p-button.p-button-danger:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #3B82F6; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #3B82F6; } + .p-speeddial-item.p-focus > .p-speeddial-action { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 black; } + .p-toast-message { backdrop-filter: blur(10px); } + .p-inline-message-text { font-weight: 500; } + .p-picklist-buttons .p-button, - .p-orderlist-controls .p-button { +.p-orderlist-controls .p-button { transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-steps .p-steps-item.p-highlight .p-steps-number { background: #3B82F6; color: #ffffff; diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css index eafeb199d31..a46ce4e78ab 100644 --- a/src/assets/components/themes/lara-light-indigo/theme.css +++ b/src/assets/components/themes/lara-light-indigo/theme.css @@ -293,32 +293,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #e24c4c; } + .p-text-secondary { color: #6b7280; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -330,12 +338,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .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; @@ -352,6 +363,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -398,6 +410,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-autocomplete-panel { background: #ffffff; color: #4b5563; @@ -444,9 +457,11 @@ color: #4b5563; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e24c4c; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -454,19 +469,23 @@ color: #6b7280; right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #6b7280; right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; border-color: #6366F1; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -493,7 +512,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6b7280; @@ -503,13 +522,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; @@ -518,14 +537,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #4b5563; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #6366F1; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -674,6 +693,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -681,10 +701,12 @@ color: #6b7280; right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #6b7280; right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -727,6 +749,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e24c4c; } + .p-cascadeselect-panel { background: #ffffff; color: #4b5563; @@ -766,6 +789,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f3f4f6; } @@ -775,9 +799,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e24c4c; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -785,6 +811,7 @@ color: #6b7280; right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -793,6 +820,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -833,9 +861,11 @@ background: #4338CA; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } @@ -848,12 +878,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #4338CA; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #6366F1; } @@ -892,9 +925,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #e24c4c; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -902,22 +937,26 @@ color: #6b7280; right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; @@ -961,6 +1000,7 @@ .p-dropdown.p-invalid.p-component { border-color: #e24c4c; } + .p-dropdown-panel { background: #ffffff; color: #4b5563; @@ -1024,6 +1064,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-dropdown { background: #f3f4f6; } @@ -1036,9 +1077,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #e24c4c; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1051,60 +1100,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #d1d5db; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1112,9 +1179,11 @@ color: #6b7280; right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e24c4c; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1122,12 +1191,14 @@ color: #6b7280; right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1166,9 +1237,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #4F46E5; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e24c4c; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1201,45 +1274,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: #6b7280; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #e24c4c; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: #6b7280; } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: #6b7280; } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: #6b7280; } + :-moz-placeholder { color: #6b7280; } + ::-moz-placeholder { color: #6b7280; } + :-ms-input-placeholder { color: #6b7280; } + .p-input-filled .p-inputtext { background-color: #f3f4f6; } @@ -1249,14 +1334,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #ffffff; color: #4b5563; @@ -1331,9 +1419,11 @@ box-shadow: 0 0 0 0.2rem #C7D2FE; border-color: #6366F1; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #e24c4c; } + .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1373,9 +1463,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1383,6 +1475,7 @@ color: #6b7280; right: 3rem; } + .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1471,6 +1564,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-multiselect { background: #f3f4f6; } @@ -1480,12 +1574,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #e24c4c; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #e24c4c; } + .p-password-panel { padding: 1.25rem; background: #ffffff; @@ -1507,6 +1604,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1514,6 +1612,7 @@ color: #6b7280; right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1521,6 +1620,7 @@ color: #6b7280; right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1558,9 +1658,11 @@ background: #4338CA; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e24c4c; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } @@ -1573,9 +1675,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #4338CA; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1606,6 +1710,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #e73d3e; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #d1d5db; @@ -1613,7 +1718,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #6b7280; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1622,7 +1727,7 @@ color: #4b5563; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #374151; } .p-selectbutton .p-button.p-highlight { @@ -1631,7 +1736,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1640,12 +1745,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #e24c4c; } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1697,6 +1804,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #d1d5db; @@ -1704,7 +1812,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #6b7280; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1713,7 +1821,7 @@ color: #4b5563; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #374151; } .p-togglebutton.p-button.p-highlight { @@ -1722,7 +1830,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1731,12 +1839,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #e24c4c; } + .p-treeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1773,12 +1883,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e24c4c; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: #4b5563; @@ -1838,6 +1951,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-treeselect { background: #f3f4f6; } @@ -1847,6 +1961,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1854,6 +1969,7 @@ color: #6b7280; right: 3rem; } + .p-button { color: #ffffff; background: #6366F1; @@ -1965,7 +2081,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1992,426 +2108,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #64748b; border: 1px solid #64748b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #475569; color: #ffffff; border-color: #475569; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e2e8f0; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #334155; color: #ffffff; border-color: #334155; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(100, 116, 139, 0.16); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #64748b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); border-color: transparent; color: #64748b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(100, 116, 139, 0.16); border-color: transparent; color: #64748b; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0ea5e9; border: 1px solid #0ea5e9; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #0284c7; color: #ffffff; border-color: #0284c7; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bfdbfe; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #0369a1; color: #ffffff; border-color: #0369a1; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(14, 165, 233, 0.16); color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0ea5e9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); border-color: transparent; color: #0ea5e9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(14, 165, 233, 0.16); border-color: transparent; color: #0ea5e9; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #22c55e; border: 1px solid #22c55e; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #16a34a; color: #ffffff; border-color: #16a34a; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bbf7d0; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #15803d; color: #ffffff; border-color: #15803d; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(34, 197, 94, 0.16); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #22c55e; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); border-color: transparent; color: #22c55e; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(34, 197, 94, 0.16); border-color: transparent; color: #22c55e; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #f97316; border: 1px solid #f97316; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ea580c; color: #ffffff; border-color: #ea580c; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde68a; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #c2410c; color: #ffffff; border-color: #c2410c; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(249, 115, 22, 0.16); color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #f97316; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); border-color: transparent; color: #f97316; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(249, 115, 22, 0.16); border-color: transparent; color: #f97316; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #a855f7; border: 1px solid #a855f7; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #9333ea; color: #ffffff; border-color: #9333ea; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e9d5ff; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7e22ce; color: #ffffff; border-color: #7e22ce; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(168, 85, 247, 0.16); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #a855f7; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); border-color: transparent; color: #a855f7; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(168, 85, 247, 0.16); border-color: transparent; color: #a855f7; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #ef4444; border: 1px solid #ef4444; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #dc2626; color: #ffffff; border-color: #dc2626; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fecaca; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #b91c1c; color: #ffffff; border-color: #b91c1c; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 68, 68, 0.16); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef4444; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); border-color: transparent; color: #ef4444; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 68, 68, 0.16); border-color: transparent; color: #ef4444; } + .p-button.p-button-link { color: #4338CA; background: transparent; @@ -2435,6 +2559,7 @@ color: #4338CA; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2446,14 +2571,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2464,45 +2592,52 @@ background: #022354; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2580,6 +2715,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #64748b; @@ -2608,6 +2744,7 @@ border-color: transparent; color: #64748b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #0ea5e9; @@ -2636,6 +2773,7 @@ border-color: transparent; color: #0ea5e9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #22c55e; @@ -2664,6 +2802,7 @@ border-color: transparent; color: #22c55e; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #f97316; @@ -2692,6 +2831,7 @@ border-color: transparent; color: #f97316; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #a855f7; @@ -2720,6 +2860,7 @@ border-color: transparent; color: #a855f7; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ef4444; @@ -2748,8 +2889,9 @@ border-color: transparent; color: #ef4444; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6b7280; @@ -2760,13 +2902,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; @@ -2792,6 +2934,7 @@ background: #EEF2FF; color: #4338CA; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2885,9 +3028,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6b7280; @@ -2897,17 +3040,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; @@ -2937,12 +3080,12 @@ background: #6366F1; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f9fafb; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f9fafb; } .p-datatable .p-datatable-loading-icon { @@ -3045,6 +3188,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3083,10 +3227,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3114,6 +3260,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3133,6 +3280,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-column-filter-overlay { background: #ffffff; color: #4b5563; @@ -3170,6 +3318,7 @@ border-top: 1px solid #e5e7eb; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #e5e7eb; @@ -3198,6 +3347,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3283,6 +3433,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #f3f4f6; } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3291,6 +3442,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3329,6 +3481,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3338,9 +3491,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #6b7280; @@ -3351,9 +3504,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #f3f4f6; border-color: transparent; color: #374151; @@ -3410,6 +3563,7 @@ border-color: transparent; color: #374151; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3495,6 +3649,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #f3f4f6; } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3503,6 +3658,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #6366F1; border-radius: 50%; @@ -3514,19 +3670,20 @@ background-color: #e5e7eb; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3583,11 +3740,11 @@ color: #4338CA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #4338CA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #4338CA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3660,6 +3817,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3799,7 +3957,7 @@ background: #6366F1; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f9fafb; } .p-treetable .p-treetable-loading-icon { @@ -3860,6 +4018,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f9fafb; color: #374151; @@ -3884,6 +4043,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3932,6 +4092,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #ffffff; color: #4b5563; @@ -3957,6 +4118,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3980,6 +4142,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -4020,6 +4183,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -4086,6 +4250,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -4096,6 +4261,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -4117,6 +4283,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4185,6 +4352,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -4195,6 +4363,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -4242,6 +4411,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -4314,6 +4484,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4355,6 +4526,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #4b5563; @@ -4365,7 +4537,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6b7280; @@ -4375,13 +4547,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; @@ -4395,6 +4567,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4414,6 +4587,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #4b5563; } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4453,6 +4627,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #4F46E5; color: #ffffff; @@ -4463,6 +4638,7 @@ color: #ffffff; border-color: #4338CA; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4494,6 +4670,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6b7280; } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4541,7 +4718,7 @@ color: #4338CA; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4338CA; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4555,7 +4732,7 @@ color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4566,7 +4743,7 @@ color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-contextmenu .p-menuitem-separator { @@ -4580,6 +4757,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4603,31 +4781,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4686,7 +4865,7 @@ color: #4338CA; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4338CA; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4700,7 +4879,7 @@ color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4711,7 +4890,7 @@ color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-megamenu .p-megamenu-panel { @@ -4769,9 +4948,10 @@ color: #4b5563; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4808,7 +4988,7 @@ color: #4338CA; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4338CA; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4822,7 +5002,7 @@ color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4833,7 +5013,7 @@ color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menu.p-menu-overlay { @@ -4867,6 +5047,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4905,7 +5086,7 @@ color: #4b5563; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: #4338CA; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4338CA; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,7 +5131,7 @@ color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4961,7 +5142,7 @@ color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-submenu-list { @@ -4978,6 +5159,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5152,7 +5334,7 @@ color: #4338CA; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4338CA; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5166,7 +5348,7 @@ color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5177,7 +5359,7 @@ color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5193,6 +5375,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5235,7 +5418,7 @@ color: #4338CA; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4338CA; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5249,7 +5432,7 @@ color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5260,7 +5443,7 @@ color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-slidemenu.p-slidemenu-overlay { @@ -5307,6 +5490,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5351,6 +5535,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5421,6 +5606,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #C7D2FE; } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5471,7 +5657,7 @@ color: #4338CA; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4338CA; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5485,7 +5671,7 @@ color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5496,7 +5682,7 @@ color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-tieredmenu .p-menuitem-separator { @@ -5510,6 +5696,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5565,6 +5752,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5653,6 +5841,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5703,7 +5892,7 @@ color: #3b82f6; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #3b82f6; } .p-toast .p-toast-message.p-toast-message-success { @@ -5713,7 +5902,7 @@ color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5723,7 +5912,7 @@ color: #cc8925; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #cc8925; } .p-toast .p-toast-message.p-toast-message-error { @@ -5733,9 +5922,10 @@ color: #ff5757; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #ff5757; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5766,7 +5956,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5823,7 +6013,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f9fafb; @@ -5833,7 +6023,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f9fafb; } @@ -5842,23 +6032,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5882,6 +6078,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5902,9 +6099,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #6366F1; color: #ffffff; @@ -5946,6 +6145,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5981,6 +6181,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5995,6 +6196,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #C7D2FE; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6010,6 +6212,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6031,6 +6234,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -6038,6 +6242,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #6366F1; color: #ffffff; @@ -6070,6 +6275,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #4b5563; @@ -6086,65 +6292,78 @@ .p-button-label { font-weight: 700; } + .p-selectbutton > .p-button, - .p-togglebutton.p-button { +.p-togglebutton.p-button { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-accordion .p-accordion-header .p-accordion-header-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #6366F1; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #6366F1; } + .p-button:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 black; } .p-button.p-button-secondary:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black; } .p-button.p-button-success:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; } .p-button.p-button-info:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 black; } .p-button.p-button-warning:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 black; } .p-button.p-button-help:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; } .p-button.p-button-danger:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #6366F1; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #6366F1; } + .p-speeddial-item.p-focus > .p-speeddial-action { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 black; } + .p-toast-message { backdrop-filter: blur(10px); } + .p-inline-message-text { font-weight: 500; } + .p-picklist-buttons .p-button, - .p-orderlist-controls .p-button { +.p-orderlist-controls .p-button { transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-steps .p-steps-item.p-highlight .p-steps-number { background: #6366F1; color: #ffffff; diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css index 5c51f852ded..4d64bb5d2d0 100644 --- a/src/assets/components/themes/lara-light-purple/theme.css +++ b/src/assets/components/themes/lara-light-purple/theme.css @@ -293,32 +293,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #e24c4c; } + .p-text-secondary { color: #6b7280; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -330,12 +338,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .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; @@ -352,6 +363,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -398,6 +410,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-autocomplete-panel { background: #ffffff; color: #4b5563; @@ -444,9 +457,11 @@ color: #4b5563; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e24c4c; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -454,19 +469,23 @@ color: #6b7280; right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #6b7280; right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; border-color: #8B5CF6; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -493,7 +512,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6b7280; @@ -503,13 +522,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; @@ -518,14 +537,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #4b5563; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #8B5CF6; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -674,6 +693,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -681,10 +701,12 @@ color: #6b7280; right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #6b7280; right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -727,6 +749,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e24c4c; } + .p-cascadeselect-panel { background: #ffffff; color: #4b5563; @@ -766,6 +789,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f3f4f6; } @@ -775,9 +799,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e24c4c; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -785,6 +811,7 @@ color: #6b7280; right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -793,6 +820,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -833,9 +861,11 @@ background: #6D28D9; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } @@ -848,12 +878,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #6D28D9; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #8B5CF6; } @@ -892,9 +925,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #e24c4c; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -902,22 +937,26 @@ color: #6b7280; right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; @@ -961,6 +1000,7 @@ .p-dropdown.p-invalid.p-component { border-color: #e24c4c; } + .p-dropdown-panel { background: #ffffff; color: #4b5563; @@ -1024,6 +1064,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-dropdown { background: #f3f4f6; } @@ -1036,9 +1077,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #e24c4c; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1051,60 +1100,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #d1d5db; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1112,9 +1179,11 @@ color: #6b7280; right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e24c4c; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1122,12 +1191,14 @@ color: #6b7280; right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1166,9 +1237,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #7C3AED; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e24c4c; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1201,45 +1274,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: #6b7280; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #e24c4c; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: #6b7280; } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: #6b7280; } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: #6b7280; } + :-moz-placeholder { color: #6b7280; } + ::-moz-placeholder { color: #6b7280; } + :-ms-input-placeholder { color: #6b7280; } + .p-input-filled .p-inputtext { background-color: #f3f4f6; } @@ -1249,14 +1334,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #ffffff; color: #4b5563; @@ -1331,9 +1419,11 @@ box-shadow: 0 0 0 0.2rem #DDD6FE; border-color: #8B5CF6; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #e24c4c; } + .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1373,9 +1463,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1383,6 +1475,7 @@ color: #6b7280; right: 3rem; } + .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1471,6 +1564,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-multiselect { background: #f3f4f6; } @@ -1480,12 +1574,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #e24c4c; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #e24c4c; } + .p-password-panel { padding: 1.25rem; background: #ffffff; @@ -1507,6 +1604,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1514,6 +1612,7 @@ color: #6b7280; right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1521,6 +1620,7 @@ color: #6b7280; right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1558,9 +1658,11 @@ background: #6D28D9; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e24c4c; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } @@ -1573,9 +1675,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #6D28D9; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1606,6 +1710,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #e73d3e; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #d1d5db; @@ -1613,7 +1718,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #6b7280; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1622,7 +1727,7 @@ color: #4b5563; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #374151; } .p-selectbutton .p-button.p-highlight { @@ -1631,7 +1736,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1640,12 +1745,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #e24c4c; } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1697,6 +1804,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #d1d5db; @@ -1704,7 +1812,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #6b7280; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1713,7 +1821,7 @@ color: #4b5563; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #374151; } .p-togglebutton.p-button.p-highlight { @@ -1722,7 +1830,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1731,12 +1839,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #e24c4c; } + .p-treeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1773,12 +1883,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e24c4c; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: #4b5563; @@ -1838,6 +1951,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-treeselect { background: #f3f4f6; } @@ -1847,6 +1961,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1854,6 +1969,7 @@ color: #6b7280; right: 3rem; } + .p-button { color: #ffffff; background: #8B5CF6; @@ -1965,7 +2081,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1992,426 +2108,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #64748b; border: 1px solid #64748b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #475569; color: #ffffff; border-color: #475569; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e2e8f0; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #334155; color: #ffffff; border-color: #334155; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(100, 116, 139, 0.16); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #64748b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); border-color: transparent; color: #64748b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(100, 116, 139, 0.16); border-color: transparent; color: #64748b; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0ea5e9; border: 1px solid #0ea5e9; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #0284c7; color: #ffffff; border-color: #0284c7; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bfdbfe; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #0369a1; color: #ffffff; border-color: #0369a1; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(14, 165, 233, 0.16); color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0ea5e9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); border-color: transparent; color: #0ea5e9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(14, 165, 233, 0.16); border-color: transparent; color: #0ea5e9; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #22c55e; border: 1px solid #22c55e; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #16a34a; color: #ffffff; border-color: #16a34a; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bbf7d0; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #15803d; color: #ffffff; border-color: #15803d; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(34, 197, 94, 0.16); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #22c55e; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); border-color: transparent; color: #22c55e; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(34, 197, 94, 0.16); border-color: transparent; color: #22c55e; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #f97316; border: 1px solid #f97316; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ea580c; color: #ffffff; border-color: #ea580c; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde68a; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #c2410c; color: #ffffff; border-color: #c2410c; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(249, 115, 22, 0.16); color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #f97316; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); border-color: transparent; color: #f97316; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(249, 115, 22, 0.16); border-color: transparent; color: #f97316; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #a855f7; border: 1px solid #a855f7; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #9333ea; color: #ffffff; border-color: #9333ea; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e9d5ff; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7e22ce; color: #ffffff; border-color: #7e22ce; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(168, 85, 247, 0.16); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #a855f7; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); border-color: transparent; color: #a855f7; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(168, 85, 247, 0.16); border-color: transparent; color: #a855f7; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #ef4444; border: 1px solid #ef4444; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #dc2626; color: #ffffff; border-color: #dc2626; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fecaca; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #b91c1c; color: #ffffff; border-color: #b91c1c; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 68, 68, 0.16); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef4444; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); border-color: transparent; color: #ef4444; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 68, 68, 0.16); border-color: transparent; color: #ef4444; } + .p-button.p-button-link { color: #6D28D9; background: transparent; @@ -2435,6 +2559,7 @@ color: #6D28D9; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2446,14 +2571,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2464,45 +2592,52 @@ background: #022354; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2580,6 +2715,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #64748b; @@ -2608,6 +2744,7 @@ border-color: transparent; color: #64748b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #0ea5e9; @@ -2636,6 +2773,7 @@ border-color: transparent; color: #0ea5e9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #22c55e; @@ -2664,6 +2802,7 @@ border-color: transparent; color: #22c55e; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #f97316; @@ -2692,6 +2831,7 @@ border-color: transparent; color: #f97316; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #a855f7; @@ -2720,6 +2860,7 @@ border-color: transparent; color: #a855f7; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ef4444; @@ -2748,8 +2889,9 @@ border-color: transparent; color: #ef4444; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6b7280; @@ -2760,13 +2902,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; @@ -2792,6 +2934,7 @@ background: #F5F3FF; color: #6D28D9; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2885,9 +3028,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6b7280; @@ -2897,17 +3040,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; @@ -2937,12 +3080,12 @@ background: #8B5CF6; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f9fafb; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f9fafb; } .p-datatable .p-datatable-loading-icon { @@ -3045,6 +3188,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3083,10 +3227,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3114,6 +3260,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3133,6 +3280,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-column-filter-overlay { background: #ffffff; color: #4b5563; @@ -3170,6 +3318,7 @@ border-top: 1px solid #e5e7eb; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #e5e7eb; @@ -3198,6 +3347,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3283,6 +3433,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #f3f4f6; } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3291,6 +3442,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3329,6 +3481,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3338,9 +3491,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #6b7280; @@ -3351,9 +3504,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #f3f4f6; border-color: transparent; color: #374151; @@ -3410,6 +3563,7 @@ border-color: transparent; color: #374151; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3495,6 +3649,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #f3f4f6; } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3503,6 +3658,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #8B5CF6; border-radius: 50%; @@ -3514,19 +3670,20 @@ background-color: #e5e7eb; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3583,11 +3740,11 @@ color: #6D28D9; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #6D28D9; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #6D28D9; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3660,6 +3817,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3799,7 +3957,7 @@ background: #8B5CF6; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f9fafb; } .p-treetable .p-treetable-loading-icon { @@ -3860,6 +4018,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f9fafb; color: #374151; @@ -3884,6 +4043,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3932,6 +4092,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #ffffff; color: #4b5563; @@ -3957,6 +4118,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3980,6 +4142,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -4020,6 +4183,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -4086,6 +4250,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -4096,6 +4261,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -4117,6 +4283,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4185,6 +4352,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -4195,6 +4363,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -4242,6 +4411,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -4314,6 +4484,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4355,6 +4526,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #4b5563; @@ -4365,7 +4537,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6b7280; @@ -4375,13 +4547,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; @@ -4395,6 +4567,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4414,6 +4587,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #4b5563; } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4453,6 +4627,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #7C3AED; color: #ffffff; @@ -4463,6 +4638,7 @@ color: #ffffff; border-color: #6D28D9; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4494,6 +4670,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6b7280; } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4541,7 +4718,7 @@ color: #6D28D9; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6D28D9; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4555,7 +4732,7 @@ color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4566,7 +4743,7 @@ color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-contextmenu .p-menuitem-separator { @@ -4580,6 +4757,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4603,31 +4781,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4686,7 +4865,7 @@ color: #6D28D9; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6D28D9; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4700,7 +4879,7 @@ color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4711,7 +4890,7 @@ color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-megamenu .p-megamenu-panel { @@ -4769,9 +4948,10 @@ color: #4b5563; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4808,7 +4988,7 @@ color: #6D28D9; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6D28D9; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4822,7 +5002,7 @@ color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4833,7 +5013,7 @@ color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menu.p-menu-overlay { @@ -4867,6 +5047,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4905,7 +5086,7 @@ color: #4b5563; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: #6D28D9; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6D28D9; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,7 +5131,7 @@ color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4961,7 +5142,7 @@ color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-submenu-list { @@ -4978,6 +5159,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5152,7 +5334,7 @@ color: #6D28D9; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6D28D9; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5166,7 +5348,7 @@ color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5177,7 +5359,7 @@ color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5193,6 +5375,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5235,7 +5418,7 @@ color: #6D28D9; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6D28D9; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5249,7 +5432,7 @@ color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5260,7 +5443,7 @@ color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-slidemenu.p-slidemenu-overlay { @@ -5307,6 +5490,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5351,6 +5535,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5421,6 +5606,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #DDD6FE; } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5471,7 +5657,7 @@ color: #6D28D9; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6D28D9; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5485,7 +5671,7 @@ color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5496,7 +5682,7 @@ color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-tieredmenu .p-menuitem-separator { @@ -5510,6 +5696,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5565,6 +5752,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5653,6 +5841,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5703,7 +5892,7 @@ color: #3b82f6; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #3b82f6; } .p-toast .p-toast-message.p-toast-message-success { @@ -5713,7 +5902,7 @@ color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5723,7 +5912,7 @@ color: #cc8925; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #cc8925; } .p-toast .p-toast-message.p-toast-message-error { @@ -5733,9 +5922,10 @@ color: #ff5757; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #ff5757; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5766,7 +5956,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5823,7 +6013,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f9fafb; @@ -5833,7 +6023,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f9fafb; } @@ -5842,23 +6032,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5882,6 +6078,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5902,9 +6099,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #8B5CF6; color: #ffffff; @@ -5946,6 +6145,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5981,6 +6181,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5995,6 +6196,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #DDD6FE; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6010,6 +6212,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6031,6 +6234,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -6038,6 +6242,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #8B5CF6; color: #ffffff; @@ -6070,6 +6275,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #4b5563; @@ -6086,65 +6292,78 @@ .p-button-label { font-weight: 700; } + .p-selectbutton > .p-button, - .p-togglebutton.p-button { +.p-togglebutton.p-button { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-accordion .p-accordion-header .p-accordion-header-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #8B5CF6; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #8B5CF6; } + .p-button:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c5aefb, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c5aefb, 0 1px 2px 0 black; } .p-button.p-button-secondary:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black; } .p-button.p-button-success:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; } .p-button.p-button-info:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 black; } .p-button.p-button-warning:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 black; } .p-button.p-button-help:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; } .p-button.p-button-danger:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #8B5CF6; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #8B5CF6; } + .p-speeddial-item.p-focus > .p-speeddial-action { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c5aefb, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c5aefb, 0 1px 2px 0 black; } + .p-toast-message { backdrop-filter: blur(10px); } + .p-inline-message-text { font-weight: 500; } + .p-picklist-buttons .p-button, - .p-orderlist-controls .p-button { +.p-orderlist-controls .p-button { transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-steps .p-steps-item.p-highlight .p-steps-number { background: #8B5CF6; color: #ffffff; diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css index 8554957bcea..89806acf4a9 100644 --- a/src/assets/components/themes/lara-light-teal/theme.css +++ b/src/assets/components/themes/lara-light-teal/theme.css @@ -293,32 +293,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #e24c4c; } + .p-text-secondary { color: #6b7280; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -330,12 +338,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .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; @@ -352,6 +363,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -398,6 +410,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-autocomplete-panel { background: #ffffff; color: #4b5563; @@ -444,9 +457,11 @@ color: #4b5563; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e24c4c; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -454,19 +469,23 @@ color: #6b7280; right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #6b7280; right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; border-color: #14b8a6; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -493,7 +512,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6b7280; @@ -503,13 +522,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; @@ -518,14 +537,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #4b5563; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #14b8a6; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -674,6 +693,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -681,10 +701,12 @@ color: #6b7280; right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #6b7280; right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -727,6 +749,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e24c4c; } + .p-cascadeselect-panel { background: #ffffff; color: #4b5563; @@ -766,6 +789,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f3f4f6; } @@ -775,9 +799,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e24c4c; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -785,6 +811,7 @@ color: #6b7280; right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -793,6 +820,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -833,9 +861,11 @@ background: #0f766e; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } @@ -848,12 +878,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #0f766e; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #14b8a6; } @@ -892,9 +925,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #e24c4c; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -902,22 +937,26 @@ color: #6b7280; right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; @@ -961,6 +1000,7 @@ .p-dropdown.p-invalid.p-component { border-color: #e24c4c; } + .p-dropdown-panel { background: #ffffff; color: #4b5563; @@ -1024,6 +1064,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-dropdown { background: #f3f4f6; } @@ -1036,9 +1077,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #e24c4c; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1051,60 +1100,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #d1d5db; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1112,9 +1179,11 @@ color: #6b7280; right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e24c4c; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1122,12 +1191,14 @@ color: #6b7280; right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1166,9 +1237,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #0d9488; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e24c4c; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1201,45 +1274,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: #6b7280; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #e24c4c; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: #6b7280; } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: #6b7280; } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: #6b7280; } + :-moz-placeholder { color: #6b7280; } + ::-moz-placeholder { color: #6b7280; } + :-ms-input-placeholder { color: #6b7280; } + .p-input-filled .p-inputtext { background-color: #f3f4f6; } @@ -1249,14 +1334,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #ffffff; color: #4b5563; @@ -1331,9 +1419,11 @@ box-shadow: 0 0 0 0.2rem #99f6e4; border-color: #14b8a6; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #e24c4c; } + .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1373,9 +1463,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1383,6 +1475,7 @@ color: #6b7280; right: 3rem; } + .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1471,6 +1564,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-multiselect { background: #f3f4f6; } @@ -1480,12 +1574,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #e24c4c; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #e24c4c; } + .p-password-panel { padding: 1.25rem; background: #ffffff; @@ -1507,6 +1604,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1514,6 +1612,7 @@ color: #6b7280; right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1521,6 +1620,7 @@ color: #6b7280; right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1558,9 +1658,11 @@ background: #0f766e; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e24c4c; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } @@ -1573,9 +1675,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0f766e; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1606,6 +1710,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #e73d3e; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #d1d5db; @@ -1613,7 +1718,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #6b7280; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1622,7 +1727,7 @@ color: #4b5563; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #374151; } .p-selectbutton .p-button.p-highlight { @@ -1631,7 +1736,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1640,12 +1745,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #e24c4c; } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1697,6 +1804,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #d1d5db; @@ -1704,7 +1812,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #6b7280; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1713,7 +1821,7 @@ color: #4b5563; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #374151; } .p-togglebutton.p-button.p-highlight { @@ -1722,7 +1830,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1731,12 +1839,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #e24c4c; } + .p-treeselect { background: #ffffff; border: 1px solid #d1d5db; @@ -1773,12 +1883,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e24c4c; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: #4b5563; @@ -1838,6 +1951,7 @@ color: #4b5563; background: transparent; } + .p-input-filled .p-treeselect { background: #f3f4f6; } @@ -1847,6 +1961,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1854,6 +1969,7 @@ color: #6b7280; right: 3rem; } + .p-button { color: #ffffff; background: #14b8a6; @@ -1965,7 +2081,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1992,426 +2108,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #64748b; border: 1px solid #64748b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #475569; color: #ffffff; border-color: #475569; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e2e8f0; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #334155; color: #ffffff; border-color: #334155; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(100, 116, 139, 0.16); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #64748b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); border-color: transparent; color: #64748b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(100, 116, 139, 0.16); border-color: transparent; color: #64748b; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0ea5e9; border: 1px solid #0ea5e9; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #0284c7; color: #ffffff; border-color: #0284c7; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bfdbfe; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #0369a1; color: #ffffff; border-color: #0369a1; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(14, 165, 233, 0.16); color: #0ea5e9; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0ea5e9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(14, 165, 233, 0.04); border-color: transparent; color: #0ea5e9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(14, 165, 233, 0.16); border-color: transparent; color: #0ea5e9; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #22c55e; border: 1px solid #22c55e; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #16a34a; color: #ffffff; border-color: #16a34a; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bbf7d0; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #15803d; color: #ffffff; border-color: #15803d; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(34, 197, 94, 0.16); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #22c55e; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); border-color: transparent; color: #22c55e; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(34, 197, 94, 0.16); border-color: transparent; color: #22c55e; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #f97316; border: 1px solid #f97316; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ea580c; color: #ffffff; border-color: #ea580c; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde68a; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #c2410c; color: #ffffff; border-color: #c2410c; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(249, 115, 22, 0.16); color: #f97316; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #f97316; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(249, 115, 22, 0.04); border-color: transparent; color: #f97316; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(249, 115, 22, 0.16); border-color: transparent; color: #f97316; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #a855f7; border: 1px solid #a855f7; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #9333ea; color: #ffffff; border-color: #9333ea; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e9d5ff; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7e22ce; color: #ffffff; border-color: #7e22ce; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(168, 85, 247, 0.16); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #a855f7; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); border-color: transparent; color: #a855f7; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(168, 85, 247, 0.16); border-color: transparent; color: #a855f7; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #ef4444; border: 1px solid #ef4444; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #dc2626; color: #ffffff; border-color: #dc2626; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fecaca; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #b91c1c; color: #ffffff; border-color: #b91c1c; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 68, 68, 0.16); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef4444; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); border-color: transparent; color: #ef4444; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 68, 68, 0.16); border-color: transparent; color: #ef4444; } + .p-button.p-button-link { color: #0f766e; background: transparent; @@ -2435,6 +2559,7 @@ color: #0f766e; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2446,14 +2571,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2464,45 +2592,52 @@ background: #022354; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2580,6 +2715,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #64748b; @@ -2608,6 +2744,7 @@ border-color: transparent; color: #64748b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #0ea5e9; @@ -2636,6 +2773,7 @@ border-color: transparent; color: #0ea5e9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #22c55e; @@ -2664,6 +2802,7 @@ border-color: transparent; color: #22c55e; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #f97316; @@ -2692,6 +2831,7 @@ border-color: transparent; color: #f97316; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #a855f7; @@ -2720,6 +2860,7 @@ border-color: transparent; color: #a855f7; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ef4444; @@ -2748,8 +2889,9 @@ border-color: transparent; color: #ef4444; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6b7280; @@ -2760,13 +2902,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; @@ -2792,6 +2934,7 @@ background: #f0fdfa; color: #0f766e; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2885,9 +3028,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6b7280; @@ -2897,17 +3040,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; @@ -2937,12 +3080,12 @@ background: #14b8a6; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f9fafb; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f9fafb; } .p-datatable .p-datatable-loading-icon { @@ -3045,6 +3188,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3083,10 +3227,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3114,6 +3260,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3133,6 +3280,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-column-filter-overlay { background: #ffffff; color: #4b5563; @@ -3170,6 +3318,7 @@ border-top: 1px solid #e5e7eb; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #e5e7eb; @@ -3198,6 +3347,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3283,6 +3433,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #f3f4f6; } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3291,6 +3442,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f3f4f6; color: #4b5563; @@ -3329,6 +3481,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-paginator { background: #ffffff; color: #6b7280; @@ -3338,9 +3491,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #6b7280; @@ -3351,9 +3504,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #f3f4f6; border-color: transparent; color: #374151; @@ -3410,6 +3563,7 @@ border-color: transparent; color: #374151; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3495,6 +3649,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #f3f4f6; } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3503,6 +3658,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #14b8a6; border-radius: 50%; @@ -3514,19 +3670,20 @@ background-color: #e5e7eb; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3583,11 +3740,11 @@ color: #0f766e; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #0f766e; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #0f766e; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3660,6 +3817,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3799,7 +3957,7 @@ background: #14b8a6; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f9fafb; } .p-treetable .p-treetable-loading-icon { @@ -3860,6 +4018,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f9fafb; color: #374151; @@ -3884,6 +4043,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3932,6 +4092,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #ffffff; color: #4b5563; @@ -3957,6 +4118,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3980,6 +4142,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -4020,6 +4183,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -4086,6 +4250,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -4096,6 +4261,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -4117,6 +4283,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4185,6 +4352,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #f9fafb; border: 1px solid #e5e7eb; @@ -4195,6 +4363,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #4b5563; @@ -4242,6 +4411,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -4314,6 +4484,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #4b5563; @@ -4355,6 +4526,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #4b5563; @@ -4365,7 +4537,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6b7280; @@ -4375,13 +4547,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #374151; border-color: transparent; background: #f3f4f6; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; @@ -4395,6 +4567,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #4b5563; color: #ffffff; @@ -4414,6 +4587,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #4b5563; } + .p-fileupload .p-fileupload-buttonbar { background: #f9fafb; padding: 1.25rem; @@ -4453,6 +4627,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #0d9488; color: #ffffff; @@ -4463,6 +4638,7 @@ color: #ffffff; border-color: #0f766e; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4494,6 +4670,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6b7280; } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4541,7 +4718,7 @@ color: #0f766e; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0f766e; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4555,7 +4732,7 @@ color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4566,7 +4743,7 @@ color: #4b5563; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-contextmenu .p-menuitem-separator { @@ -4580,6 +4757,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4603,31 +4781,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4686,7 +4865,7 @@ color: #0f766e; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0f766e; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4700,7 +4879,7 @@ color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4711,7 +4890,7 @@ color: #4b5563; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-megamenu .p-megamenu-panel { @@ -4769,9 +4948,10 @@ color: #4b5563; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4808,7 +4988,7 @@ color: #0f766e; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0f766e; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4822,7 +5002,7 @@ color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4833,7 +5013,7 @@ color: #4b5563; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menu.p-menu-overlay { @@ -4867,6 +5047,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f9fafb; @@ -4905,7 +5086,7 @@ color: #4b5563; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4936,7 +5117,7 @@ color: #0f766e; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0f766e; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4950,7 +5131,7 @@ color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4961,7 +5142,7 @@ color: #4b5563; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-menubar .p-submenu-list { @@ -4978,6 +5159,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5152,7 +5334,7 @@ color: #0f766e; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0f766e; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5166,7 +5348,7 @@ color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5177,7 +5359,7 @@ color: #4b5563; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5193,6 +5375,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5235,7 +5418,7 @@ color: #0f766e; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0f766e; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5249,7 +5432,7 @@ color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5260,7 +5443,7 @@ color: #4b5563; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-slidemenu.p-slidemenu-overlay { @@ -5307,6 +5490,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5351,6 +5535,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5421,6 +5606,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #99f6e4; } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5471,7 +5657,7 @@ color: #0f766e; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #0f766e; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5485,7 +5671,7 @@ color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5496,7 +5682,7 @@ color: #4b5563; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6b7280; } .p-tieredmenu .p-menuitem-separator { @@ -5510,6 +5696,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5565,6 +5752,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5653,6 +5841,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 1; } @@ -5703,7 +5892,7 @@ color: #3b82f6; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #3b82f6; } .p-toast .p-toast-message.p-toast-message-success { @@ -5713,7 +5902,7 @@ color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5723,7 +5912,7 @@ color: #cc8925; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #cc8925; } .p-toast .p-toast-message.p-toast-message-error { @@ -5733,9 +5922,10 @@ color: #ff5757; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #ff5757; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5766,7 +5956,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5823,7 +6013,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f9fafb; @@ -5833,7 +6023,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f9fafb; } @@ -5842,23 +6032,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5882,6 +6078,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #e5e7eb; border-radius: 6px; @@ -5902,9 +6099,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #14b8a6; color: #ffffff; @@ -5946,6 +6145,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #e5e7eb; color: #4b5563; @@ -5981,6 +6181,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5995,6 +6196,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6010,6 +6212,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6031,6 +6234,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e5e7eb; border-radius: 6px; @@ -6038,6 +6242,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #14b8a6; color: #ffffff; @@ -6070,6 +6275,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #4b5563; @@ -6086,65 +6292,78 @@ .p-button-label { font-weight: 700; } + .p-selectbutton > .p-button, - .p-togglebutton.p-button { +.p-togglebutton.p-button { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-accordion .p-accordion-header .p-accordion-header-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #14b8a6; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #14b8a6; } + .p-button:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #75f0e3, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #75f0e3, 0 1px 2px 0 black; } .p-button.p-button-secondary:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black; } .p-button.p-button-success:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black; } .p-button.p-button-info:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 black; } .p-button.p-button-warning:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 black; } .p-button.p-button-help:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 black; } .p-button.p-button-danger:enabled:focus { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #14b8a6; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #14b8a6; } + .p-speeddial-item.p-focus > .p-speeddial-action { - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #75f0e3, 0 1px 2px 0 rgb(0, 0, 0); + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #75f0e3, 0 1px 2px 0 black; } + .p-toast-message { backdrop-filter: blur(10px); } + .p-inline-message-text { font-weight: 500; } + .p-picklist-buttons .p-button, - .p-orderlist-controls .p-button { +.p-orderlist-controls .p-button { transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } + .p-steps .p-steps-item.p-highlight .p-steps-number { background: #14b8a6; color: #ffffff; diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css index 72343ae0247..6ecf58877e3 100644 --- a/src/assets/components/themes/luna-amber/theme.css +++ b/src/assets/components/themes/luna-amber/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.5; } + .p-error { color: #e57373; } + .p-text-secondary { color: #888888; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-autocomplete-panel { background: #323232; color: #dedede; @@ -427,9 +440,11 @@ color: #dedede; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e57373; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 1.858rem; } @@ -437,19 +452,23 @@ color: #888888; right: 0.429rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #888888; right: 2.786rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; border-color: #FFE082; } + .p-datepicker { padding: 0.857rem; background: #323232; @@ -476,23 +495,23 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #dedede; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #FFE082; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -567,7 +586,7 @@ .p-datepicker .p-timepicker button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 1.858rem; } @@ -664,10 +684,12 @@ color: #888888; right: 0.429rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #888888; right: 2.786rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e57373; } + .p-cascadeselect-panel { background: #323232; color: #dedede; @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #4b4b4b; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e57373; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.429rem; } @@ -768,6 +794,7 @@ color: #888888; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #FFCA28; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } @@ -831,15 +861,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #FFCA28; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #FFE082; } @@ -878,9 +912,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #e57373; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.429rem; } @@ -888,22 +924,26 @@ color: #888888; right: 0.429rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { background: #191919; border: 1px solid #4b4b4b; @@ -947,6 +987,7 @@ .p-dropdown.p-invalid.p-component { border-color: #e57373; } + .p-dropdown-panel { background: #323232; color: #dedede; @@ -1010,6 +1051,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-dropdown { background: #4b4b4b; } @@ -1022,9 +1064,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #e57373; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1037,60 +1087,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #4b4b4b; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #888888; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #888888; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 1.858rem; } @@ -1098,9 +1166,11 @@ color: #888888; right: 0.429rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e57373; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 1.858rem; } @@ -1108,12 +1178,14 @@ color: #888888; right: 0.429rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.786rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.786rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1152,9 +1224,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #FFD54F; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e57373; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1187,45 +1261,57 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-float-label > label { left: 0.429rem; color: #9b9b9b; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #e57373; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.429rem; color: #888888; } + .p-input-icon-left > .p-inputtext { padding-left: 1.858rem; } + .p-input-icon-left.p-float-label > label { left: 1.858rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.429rem; color: #888888; } + .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + ::-webkit-input-placeholder { color: #9b9b9b; } + :-moz-placeholder { color: #9b9b9b; } + ::-moz-placeholder { color: #9b9b9b; } + :-ms-input-placeholder { color: #9b9b9b; } + .p-input-filled .p-inputtext { background-color: #4b4b4b; } @@ -1235,14 +1321,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #4b4b4b; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox { background: #323232; color: #dedede; @@ -1317,9 +1406,11 @@ box-shadow: 0 0 0 0.1rem white; border-color: #FFE082; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #e57373; } + .p-multiselect { background: #191919; border: 1px solid #4b4b4b; @@ -1359,9 +1450,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.429rem; } @@ -1369,6 +1462,7 @@ color: #888888; right: 2.357rem; } + .p-multiselect-panel { background: #323232; color: #dedede; @@ -1399,7 +1493,7 @@ margin-left: 0.5rem; width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -1457,6 +1551,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-multiselect { background: #4b4b4b; } @@ -1466,12 +1561,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #e57373; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #e57373; } + .p-password-panel { padding: 0.571rem 1rem; background: #323232; @@ -1493,6 +1591,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } + p-password.p-password-clearable .p-password-input { padding-right: 1.858rem; } @@ -1500,6 +1599,7 @@ color: #888888; right: 0.429rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.287rem; } @@ -1507,6 +1607,7 @@ color: #888888; right: 1.858rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1544,9 +1645,11 @@ background: #FFCA28; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e57373; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } @@ -1559,12 +1662,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #FFCA28; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { gap: 0.5rem; } @@ -1595,9 +1701,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b5019f; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #212529; } + .p-selectbutton .p-button { background: #252525; border: 1px solid #252525; @@ -1605,7 +1713,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #888888; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1614,7 +1722,7 @@ color: #dedede; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #dedede; } .p-selectbutton .p-button.p-highlight { @@ -1623,7 +1731,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1632,12 +1740,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #e57373; } + .p-slider { background: #4b4b4b; border: 0 none; @@ -1689,6 +1799,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #252525; border: 1px solid #252525; @@ -1696,7 +1807,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #888888; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1705,7 +1816,7 @@ color: #dedede; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #dedede; } .p-togglebutton.p-button.p-highlight { @@ -1714,7 +1825,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1723,12 +1834,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #e57373; } + .p-treeselect { background: #191919; border: 1px solid #4b4b4b; @@ -1765,12 +1878,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e57373; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.2145rem 0.429rem; } + .p-treeselect-panel { background: #323232; color: #dedede; @@ -1806,7 +1922,7 @@ .p-treeselect-panel .p-treeselect-header .p-treeselect-close { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -1830,6 +1946,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-treeselect { background: #4b4b4b; } @@ -1839,6 +1956,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.429rem; } @@ -1846,6 +1964,7 @@ color: #888888; right: 2.357rem; } + .p-button { color: #212529; background: #FFE082; @@ -1957,7 +2076,7 @@ padding: 0.429rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1984,426 +2103,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #b0bec5; border: 1px solid #b0bec5; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #90a4ae; color: #121212; border-color: #90a4ae; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #cfd8dc; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #78909c; color: #121212; border-color: #78909c; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(176, 190, 197, 0.04); color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(176, 190, 197, 0.16); color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #b0bec5; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(176, 190, 197, 0.04); border-color: transparent; color: #b0bec5; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(176, 190, 197, 0.16); border-color: transparent; color: #b0bec5; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #212529; background: #4fc3f7; border: 1px solid #4fc3f7; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #29b6f6; color: #212529; border-color: #29b6f6; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #e1f5fe; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #03a9f4; color: #212529; border-color: #03a9f4; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(79, 195, 247, 0.04); color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(79, 195, 247, 0.16); color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #4fc3f7; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(79, 195, 247, 0.04); border-color: transparent; color: #4fc3f7; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(79, 195, 247, 0.16); border-color: transparent; color: #4fc3f7; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #212529; background: #aed581; border: 1px solid #aed581; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #9ccc65; color: #212529; border-color: #9ccc65; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #f1f8e9; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #8bc34a; color: #212529; border-color: #8bc34a; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(174, 213, 129, 0.04); color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(174, 213, 129, 0.16); color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #aed581; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(174, 213, 129, 0.04); border-color: transparent; color: #aed581; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(174, 213, 129, 0.16); border-color: transparent; color: #aed581; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #ffb74d; border: 1px solid #ffb74d; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffa726; color: #212529; border-color: #ffa726; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #fffde7; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ff9800; color: #212529; border-color: #ff9800; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 183, 77, 0.04); color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 183, 77, 0.16); color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffb74d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 183, 77, 0.04); border-color: transparent; color: #ffb74d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 183, 77, 0.16); border-color: transparent; color: #ffb74d; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #ba68c8; color: #121212; border-color: #ba68c8; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ce93d8; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #ab47bc; color: #121212; border-color: #ab47bc; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #212529; background: #e57373; border: 1px solid #e57373; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #ef5350; color: #212529; border-color: #ef5350; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #ffebee; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #f44336; color: #212529; border-color: #f44336; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(229, 115, 115, 0.04); color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(229, 115, 115, 0.16); color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #e57373; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(229, 115, 115, 0.04); border-color: transparent; color: #e57373; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(229, 115, 115, 0.16); border-color: transparent; color: #e57373; } + .p-button.p-button-link { color: #FFE082; background: transparent; @@ -2427,6 +2554,7 @@ color: #FFE082; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2438,14 +2566,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2456,45 +2587,52 @@ background: #4d4d4d; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2572,6 +2710,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #b0bec5; @@ -2600,6 +2739,7 @@ border-color: transparent; color: #b0bec5; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #4fc3f7; @@ -2628,6 +2768,7 @@ border-color: transparent; color: #4fc3f7; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #aed581; @@ -2656,6 +2797,7 @@ border-color: transparent; color: #aed581; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffb74d; @@ -2684,6 +2826,7 @@ border-color: transparent; color: #ffb74d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2712,6 +2855,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #e57373; @@ -2740,11 +2884,12 @@ border-color: transparent; color: #e57373; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -2752,13 +2897,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2784,6 +2929,7 @@ background: #FFE082; color: #212529; } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2877,29 +3023,29 @@ padding: 0.571rem 0.857rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2929,12 +3075,12 @@ background: #FFE082; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #191919; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #252525; } .p-datatable .p-datatable-loading-icon { @@ -3037,6 +3183,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.71375rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3075,14 +3222,16 @@ .p-dataview .p-dataview-emptymessage { padding: 0.571rem 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3106,10 +3255,11 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3125,6 +3275,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-column-filter-overlay { background: #323232; color: #dedede; @@ -3162,6 +3313,7 @@ border-top: 1px solid #4b4b4b; margin: 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.429rem 0.857rem; border-bottom: 1px solid #191919; @@ -3190,6 +3342,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.571rem 1rem; } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -3275,6 +3428,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #4c4c4c; } + .p-orderlist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3283,6 +3437,7 @@ background: #323232; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; @@ -3321,6 +3476,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-paginator { background: #252525; color: #dedede; @@ -3330,9 +3486,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #dedede; @@ -3343,9 +3499,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; border-color: transparent; color: #4c4c4c; @@ -3402,6 +3558,7 @@ border-color: transparent; color: #4c4c4c; } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } @@ -3487,6 +3644,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #4c4c4c; } + .p-picklist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3495,6 +3653,7 @@ background: #323232; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3506,19 +3665,20 @@ background-color: #191919; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #191919; background: #323232; @@ -3544,7 +3704,7 @@ margin-right: 0.5rem; width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3575,11 +3735,11 @@ color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3652,6 +3812,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3739,7 +3900,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3791,7 +3952,7 @@ background: #FFE082; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #191919; } .p-treetable .p-treetable-loading-icon { @@ -3852,6 +4013,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.71375rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #191919; color: #dedede; @@ -3876,6 +4038,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #191919; @@ -3924,6 +4087,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 2px; } + .p-card { background: #323232; color: #dedede; @@ -3949,6 +4113,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #323232; } @@ -3972,6 +4137,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #191919; background: #323232; @@ -4012,6 +4178,7 @@ .p-fieldset .p-fieldset-content { padding: 0.571rem 1rem; } + .p-panel .p-panel-header { border: 1px solid #191919; padding: 0.857rem 1rem; @@ -4026,7 +4193,7 @@ .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -4078,6 +4245,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; @@ -4088,6 +4256,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-splitter { border: 1px solid #191919; background: #323232; @@ -4109,6 +4278,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4177,6 +4347,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #191919; border: 1px solid #191919; @@ -4187,6 +4358,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #323232; color: #dedede; @@ -4234,6 +4406,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -4254,7 +4427,7 @@ .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -4306,6 +4479,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #323232; color: #dedede; @@ -4347,6 +4521,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #191919; } + .p-sidebar { background: #323232; color: #dedede; @@ -4357,23 +4532,23 @@ padding: 0.857rem 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -4387,6 +4562,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.857rem 1rem; } + .p-tooltip .p-tooltip-text { background: #4c4c4c; color: #dedede; @@ -4406,6 +4582,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #4c4c4c; } + .p-fileupload .p-fileupload-buttonbar { background: #191919; padding: 0.857rem 1rem; @@ -4445,6 +4622,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #FFD54F; color: #212529; @@ -4455,6 +4633,7 @@ color: #212529; border-color: #FFCA28; } + .p-breadcrumb { background: #252525; border: 1px solid #191919; @@ -4486,6 +4665,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #dedede; } + .p-contextmenu { padding: 0; background: #252525; @@ -4533,7 +4713,7 @@ color: #212529; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4547,7 +4727,7 @@ color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4558,7 +4738,7 @@ color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-contextmenu .p-menuitem-separator { @@ -4572,6 +4752,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4595,31 +4776,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4678,7 +4860,7 @@ color: #212529; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4692,7 +4874,7 @@ color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4703,7 +4885,7 @@ color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-megamenu .p-megamenu-panel { @@ -4761,9 +4943,10 @@ color: #dedede; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } + .p-menu { padding: 0; background: #252525; @@ -4800,7 +4983,7 @@ color: #212529; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4814,7 +4997,7 @@ color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4825,7 +5008,7 @@ color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menu.p-menu-overlay { @@ -4859,6 +5042,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #252525; @@ -4897,7 +5081,7 @@ color: #dedede; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4928,7 +5112,7 @@ color: #212529; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4942,7 +5126,7 @@ color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4953,7 +5137,7 @@ color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-submenu-list { @@ -4970,6 +5154,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5144,7 +5329,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5158,7 +5343,7 @@ color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5169,7 +5354,7 @@ color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5185,6 +5370,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 2px; } + .p-slidemenu { padding: 0; background: #252525; @@ -5227,7 +5413,7 @@ color: #212529; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5241,7 +5427,7 @@ color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5252,7 +5438,7 @@ color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-slidemenu.p-slidemenu-overlay { @@ -5299,6 +5485,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -5343,6 +5530,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -5413,6 +5601,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.1rem white; } + .p-tieredmenu { padding: 0; background: #252525; @@ -5463,7 +5652,7 @@ color: #212529; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5477,7 +5666,7 @@ color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5488,7 +5677,7 @@ color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-tieredmenu .p-menuitem-separator { @@ -5502,6 +5691,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5557,6 +5747,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5645,6 +5836,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5695,7 +5887,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-success { @@ -5705,7 +5897,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5715,7 +5907,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-error { @@ -5725,9 +5917,10 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #212121; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5758,7 +5951,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5815,7 +6008,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #aeb6bf; @@ -5825,7 +6018,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } @@ -5834,23 +6027,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5874,6 +6073,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #4b4b4b; border-radius: 3px; @@ -5894,9 +6094,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #323232; } + .p-badge { background: #FFE082; color: #212529; @@ -5938,6 +6140,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #4b4b4b; color: #dedede; @@ -5973,6 +6176,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5987,6 +6191,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-progressbar { border: 0 none; height: 24px; @@ -6002,6 +6207,7 @@ color: #212529; line-height: 24px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6023,6 +6229,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6030,6 +6237,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #FFE082; color: #212529; @@ -6062,6 +6270,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #323232; color: #dedede; diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css index e389f151101..690ca30a506 100644 --- a/src/assets/components/themes/luna-blue/theme.css +++ b/src/assets/components/themes/luna-blue/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.5; } + .p-error { color: #e57373; } + .p-text-secondary { color: #888888; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-autocomplete-panel { background: #323232; color: #dedede; @@ -427,9 +440,11 @@ color: #dedede; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e57373; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 1.858rem; } @@ -437,19 +452,23 @@ color: #888888; right: 0.429rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #888888; right: 2.786rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; border-color: #81D4FA; } + .p-datepicker { padding: 0.857rem; background: #323232; @@ -476,23 +495,23 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #dedede; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #81D4FA; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -567,7 +586,7 @@ .p-datepicker .p-timepicker button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 1.858rem; } @@ -664,10 +684,12 @@ color: #888888; right: 0.429rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #888888; right: 2.786rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e57373; } + .p-cascadeselect-panel { background: #323232; color: #dedede; @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #4b4b4b; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e57373; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.429rem; } @@ -768,6 +794,7 @@ color: #888888; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #29B6F6; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } @@ -831,15 +861,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #29B6F6; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #81D4FA; } @@ -878,9 +912,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #e57373; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.429rem; } @@ -888,22 +924,26 @@ color: #888888; right: 0.429rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { background: #191919; border: 1px solid #4b4b4b; @@ -947,6 +987,7 @@ .p-dropdown.p-invalid.p-component { border-color: #e57373; } + .p-dropdown-panel { background: #323232; color: #dedede; @@ -1010,6 +1051,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-dropdown { background: #4b4b4b; } @@ -1022,9 +1064,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #e57373; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1037,60 +1087,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #4b4b4b; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #888888; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #888888; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 1.858rem; } @@ -1098,9 +1166,11 @@ color: #888888; right: 0.429rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e57373; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 1.858rem; } @@ -1108,12 +1178,14 @@ color: #888888; right: 0.429rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.786rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.786rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1152,9 +1224,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #4FC3F7; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e57373; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1187,45 +1261,57 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-float-label > label { left: 0.429rem; color: #9b9b9b; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #e57373; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.429rem; color: #888888; } + .p-input-icon-left > .p-inputtext { padding-left: 1.858rem; } + .p-input-icon-left.p-float-label > label { left: 1.858rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.429rem; color: #888888; } + .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + ::-webkit-input-placeholder { color: #9b9b9b; } + :-moz-placeholder { color: #9b9b9b; } + ::-moz-placeholder { color: #9b9b9b; } + :-ms-input-placeholder { color: #9b9b9b; } + .p-input-filled .p-inputtext { background-color: #4b4b4b; } @@ -1235,14 +1321,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #4b4b4b; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox { background: #323232; color: #dedede; @@ -1317,9 +1406,11 @@ box-shadow: 0 0 0 0.1rem white; border-color: #81D4FA; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #e57373; } + .p-multiselect { background: #191919; border: 1px solid #4b4b4b; @@ -1359,9 +1450,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.429rem; } @@ -1369,6 +1462,7 @@ color: #888888; right: 2.357rem; } + .p-multiselect-panel { background: #323232; color: #dedede; @@ -1399,7 +1493,7 @@ margin-left: 0.5rem; width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -1457,6 +1551,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-multiselect { background: #4b4b4b; } @@ -1466,12 +1561,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #e57373; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #e57373; } + .p-password-panel { padding: 0.571rem 1rem; background: #323232; @@ -1493,6 +1591,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } + p-password.p-password-clearable .p-password-input { padding-right: 1.858rem; } @@ -1500,6 +1599,7 @@ color: #888888; right: 0.429rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.287rem; } @@ -1507,6 +1607,7 @@ color: #888888; right: 1.858rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1544,9 +1645,11 @@ background: #29B6F6; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e57373; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } @@ -1559,12 +1662,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #29B6F6; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { gap: 0.5rem; } @@ -1595,9 +1701,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b5019f; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #212529; } + .p-selectbutton .p-button { background: #252525; border: 1px solid #252525; @@ -1605,7 +1713,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #888888; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1614,7 +1722,7 @@ color: #dedede; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #dedede; } .p-selectbutton .p-button.p-highlight { @@ -1623,7 +1731,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1632,12 +1740,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #e57373; } + .p-slider { background: #4b4b4b; border: 0 none; @@ -1689,6 +1799,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #252525; border: 1px solid #252525; @@ -1696,7 +1807,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #888888; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1705,7 +1816,7 @@ color: #dedede; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #dedede; } .p-togglebutton.p-button.p-highlight { @@ -1714,7 +1825,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1723,12 +1834,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #e57373; } + .p-treeselect { background: #191919; border: 1px solid #4b4b4b; @@ -1765,12 +1878,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e57373; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.2145rem 0.429rem; } + .p-treeselect-panel { background: #323232; color: #dedede; @@ -1806,7 +1922,7 @@ .p-treeselect-panel .p-treeselect-header .p-treeselect-close { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -1830,6 +1946,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-treeselect { background: #4b4b4b; } @@ -1839,6 +1956,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.429rem; } @@ -1846,6 +1964,7 @@ color: #888888; right: 2.357rem; } + .p-button { color: #212529; background: #81D4FA; @@ -1957,7 +2076,7 @@ padding: 0.429rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1984,426 +2103,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #b0bec5; border: 1px solid #b0bec5; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #90a4ae; color: #121212; border-color: #90a4ae; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #cfd8dc; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #78909c; color: #121212; border-color: #78909c; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(176, 190, 197, 0.04); color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(176, 190, 197, 0.16); color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #b0bec5; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(176, 190, 197, 0.04); border-color: transparent; color: #b0bec5; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(176, 190, 197, 0.16); border-color: transparent; color: #b0bec5; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #212529; background: #4fc3f7; border: 1px solid #4fc3f7; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #29b6f6; color: #212529; border-color: #29b6f6; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #e1f5fe; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #03a9f4; color: #212529; border-color: #03a9f4; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(79, 195, 247, 0.04); color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(79, 195, 247, 0.16); color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #4fc3f7; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(79, 195, 247, 0.04); border-color: transparent; color: #4fc3f7; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(79, 195, 247, 0.16); border-color: transparent; color: #4fc3f7; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #212529; background: #aed581; border: 1px solid #aed581; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #9ccc65; color: #212529; border-color: #9ccc65; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #f1f8e9; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #8bc34a; color: #212529; border-color: #8bc34a; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(174, 213, 129, 0.04); color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(174, 213, 129, 0.16); color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #aed581; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(174, 213, 129, 0.04); border-color: transparent; color: #aed581; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(174, 213, 129, 0.16); border-color: transparent; color: #aed581; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #ffb74d; border: 1px solid #ffb74d; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffa726; color: #212529; border-color: #ffa726; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #fffde7; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ff9800; color: #212529; border-color: #ff9800; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 183, 77, 0.04); color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 183, 77, 0.16); color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffb74d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 183, 77, 0.04); border-color: transparent; color: #ffb74d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 183, 77, 0.16); border-color: transparent; color: #ffb74d; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #ba68c8; color: #121212; border-color: #ba68c8; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ce93d8; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #ab47bc; color: #121212; border-color: #ab47bc; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #212529; background: #e57373; border: 1px solid #e57373; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #ef5350; color: #212529; border-color: #ef5350; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #ffebee; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #f44336; color: #212529; border-color: #f44336; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(229, 115, 115, 0.04); color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(229, 115, 115, 0.16); color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #e57373; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(229, 115, 115, 0.04); border-color: transparent; color: #e57373; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(229, 115, 115, 0.16); border-color: transparent; color: #e57373; } + .p-button.p-button-link { color: #81D4FA; background: transparent; @@ -2427,6 +2554,7 @@ color: #81D4FA; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2438,14 +2566,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2456,45 +2587,52 @@ background: #4d4d4d; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2572,6 +2710,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #b0bec5; @@ -2600,6 +2739,7 @@ border-color: transparent; color: #b0bec5; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #4fc3f7; @@ -2628,6 +2768,7 @@ border-color: transparent; color: #4fc3f7; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #aed581; @@ -2656,6 +2797,7 @@ border-color: transparent; color: #aed581; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffb74d; @@ -2684,6 +2826,7 @@ border-color: transparent; color: #ffb74d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2712,6 +2855,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #e57373; @@ -2740,11 +2884,12 @@ border-color: transparent; color: #e57373; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -2752,13 +2897,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2784,6 +2929,7 @@ background: #81D4FA; color: #212529; } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2877,29 +3023,29 @@ padding: 0.571rem 0.857rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2929,12 +3075,12 @@ background: #81D4FA; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #191919; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #252525; } .p-datatable .p-datatable-loading-icon { @@ -3037,6 +3183,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.71375rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3075,14 +3222,16 @@ .p-dataview .p-dataview-emptymessage { padding: 0.571rem 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3106,10 +3255,11 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3125,6 +3275,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-column-filter-overlay { background: #323232; color: #dedede; @@ -3162,6 +3313,7 @@ border-top: 1px solid #4b4b4b; margin: 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.429rem 0.857rem; border-bottom: 1px solid #191919; @@ -3190,6 +3342,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.571rem 1rem; } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -3275,6 +3428,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #4c4c4c; } + .p-orderlist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3283,6 +3437,7 @@ background: #323232; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; @@ -3321,6 +3476,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-paginator { background: #252525; color: #dedede; @@ -3330,9 +3486,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #dedede; @@ -3343,9 +3499,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; border-color: transparent; color: #4c4c4c; @@ -3402,6 +3558,7 @@ border-color: transparent; color: #4c4c4c; } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } @@ -3487,6 +3644,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #4c4c4c; } + .p-picklist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3495,6 +3653,7 @@ background: #323232; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3506,19 +3665,20 @@ background-color: #191919; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #191919; background: #323232; @@ -3544,7 +3704,7 @@ margin-right: 0.5rem; width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3575,11 +3735,11 @@ color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3652,6 +3812,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3739,7 +3900,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3791,7 +3952,7 @@ background: #81D4FA; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #191919; } .p-treetable .p-treetable-loading-icon { @@ -3852,6 +4013,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.71375rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #191919; color: #dedede; @@ -3876,6 +4038,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #191919; @@ -3924,6 +4087,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 2px; } + .p-card { background: #323232; color: #dedede; @@ -3949,6 +4113,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #323232; } @@ -3972,6 +4137,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #191919; background: #323232; @@ -4012,6 +4178,7 @@ .p-fieldset .p-fieldset-content { padding: 0.571rem 1rem; } + .p-panel .p-panel-header { border: 1px solid #191919; padding: 0.857rem 1rem; @@ -4026,7 +4193,7 @@ .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -4078,6 +4245,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; @@ -4088,6 +4256,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-splitter { border: 1px solid #191919; background: #323232; @@ -4109,6 +4278,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4177,6 +4347,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #191919; border: 1px solid #191919; @@ -4187,6 +4358,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #323232; color: #dedede; @@ -4234,6 +4406,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -4254,7 +4427,7 @@ .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -4306,6 +4479,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #323232; color: #dedede; @@ -4347,6 +4521,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #191919; } + .p-sidebar { background: #323232; color: #dedede; @@ -4357,23 +4532,23 @@ padding: 0.857rem 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -4387,6 +4562,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.857rem 1rem; } + .p-tooltip .p-tooltip-text { background: #4c4c4c; color: #dedede; @@ -4406,6 +4582,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #4c4c4c; } + .p-fileupload .p-fileupload-buttonbar { background: #191919; padding: 0.857rem 1rem; @@ -4445,6 +4622,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #4FC3F7; color: #212529; @@ -4455,6 +4633,7 @@ color: #212529; border-color: #29B6F6; } + .p-breadcrumb { background: #252525; border: 1px solid #191919; @@ -4486,6 +4665,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #dedede; } + .p-contextmenu { padding: 0; background: #252525; @@ -4533,7 +4713,7 @@ color: #212529; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4547,7 +4727,7 @@ color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4558,7 +4738,7 @@ color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-contextmenu .p-menuitem-separator { @@ -4572,6 +4752,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4595,31 +4776,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4678,7 +4860,7 @@ color: #212529; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4692,7 +4874,7 @@ color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4703,7 +4885,7 @@ color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-megamenu .p-megamenu-panel { @@ -4761,9 +4943,10 @@ color: #dedede; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } + .p-menu { padding: 0; background: #252525; @@ -4800,7 +4983,7 @@ color: #212529; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4814,7 +4997,7 @@ color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4825,7 +5008,7 @@ color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menu.p-menu-overlay { @@ -4859,6 +5042,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #252525; @@ -4897,7 +5081,7 @@ color: #dedede; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4928,7 +5112,7 @@ color: #212529; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4942,7 +5126,7 @@ color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4953,7 +5137,7 @@ color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-submenu-list { @@ -4970,6 +5154,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5144,7 +5329,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5158,7 +5343,7 @@ color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5169,7 +5354,7 @@ color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5185,6 +5370,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 2px; } + .p-slidemenu { padding: 0; background: #252525; @@ -5227,7 +5413,7 @@ color: #212529; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5241,7 +5427,7 @@ color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5252,7 +5438,7 @@ color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-slidemenu.p-slidemenu-overlay { @@ -5299,6 +5485,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -5343,6 +5530,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -5413,6 +5601,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.1rem white; } + .p-tieredmenu { padding: 0; background: #252525; @@ -5463,7 +5652,7 @@ color: #212529; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5477,7 +5666,7 @@ color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5488,7 +5677,7 @@ color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-tieredmenu .p-menuitem-separator { @@ -5502,6 +5691,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5557,6 +5747,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5645,6 +5836,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5695,7 +5887,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-success { @@ -5705,7 +5897,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5715,7 +5907,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-error { @@ -5725,9 +5917,10 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #212121; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5758,7 +5951,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5815,7 +6008,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #aeb6bf; @@ -5825,7 +6018,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } @@ -5834,23 +6027,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5874,6 +6073,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #4b4b4b; border-radius: 3px; @@ -5894,9 +6094,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #323232; } + .p-badge { background: #81D4FA; color: #212529; @@ -5938,6 +6140,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #4b4b4b; color: #dedede; @@ -5973,6 +6176,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5987,6 +6191,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-progressbar { border: 0 none; height: 24px; @@ -6002,6 +6207,7 @@ color: #212529; line-height: 24px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6023,6 +6229,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6030,6 +6237,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #81D4FA; color: #212529; @@ -6062,6 +6270,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #323232; color: #dedede; diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css index 6d363ab9af5..9d63a533f6a 100644 --- a/src/assets/components/themes/luna-green/theme.css +++ b/src/assets/components/themes/luna-green/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.5; } + .p-error { color: #e57373; } + .p-text-secondary { color: #888888; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-autocomplete-panel { background: #323232; color: #dedede; @@ -427,9 +440,11 @@ color: #dedede; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e57373; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 1.858rem; } @@ -437,19 +452,23 @@ color: #888888; right: 0.429rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #888888; right: 2.786rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; border-color: #C5E1A5; } + .p-datepicker { padding: 0.857rem; background: #323232; @@ -476,23 +495,23 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #dedede; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #C5E1A5; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -567,7 +586,7 @@ .p-datepicker .p-timepicker button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 1.858rem; } @@ -664,10 +684,12 @@ color: #888888; right: 0.429rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #888888; right: 2.786rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e57373; } + .p-cascadeselect-panel { background: #323232; color: #dedede; @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #4b4b4b; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e57373; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.429rem; } @@ -768,6 +794,7 @@ color: #888888; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #9CCC65; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } @@ -831,15 +861,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9CCC65; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #C5E1A5; } @@ -878,9 +912,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #e57373; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.429rem; } @@ -888,22 +924,26 @@ color: #888888; right: 0.429rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { background: #191919; border: 1px solid #4b4b4b; @@ -947,6 +987,7 @@ .p-dropdown.p-invalid.p-component { border-color: #e57373; } + .p-dropdown-panel { background: #323232; color: #dedede; @@ -1010,6 +1051,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-dropdown { background: #4b4b4b; } @@ -1022,9 +1064,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #e57373; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1037,60 +1087,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #4b4b4b; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #888888; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #888888; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 1.858rem; } @@ -1098,9 +1166,11 @@ color: #888888; right: 0.429rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e57373; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 1.858rem; } @@ -1108,12 +1178,14 @@ color: #888888; right: 0.429rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.786rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.786rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1152,9 +1224,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #AED581; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e57373; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1187,45 +1261,57 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-float-label > label { left: 0.429rem; color: #9b9b9b; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #e57373; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.429rem; color: #888888; } + .p-input-icon-left > .p-inputtext { padding-left: 1.858rem; } + .p-input-icon-left.p-float-label > label { left: 1.858rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.429rem; color: #888888; } + .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + ::-webkit-input-placeholder { color: #9b9b9b; } + :-moz-placeholder { color: #9b9b9b; } + ::-moz-placeholder { color: #9b9b9b; } + :-ms-input-placeholder { color: #9b9b9b; } + .p-input-filled .p-inputtext { background-color: #4b4b4b; } @@ -1235,14 +1321,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #4b4b4b; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox { background: #323232; color: #dedede; @@ -1317,9 +1406,11 @@ box-shadow: 0 0 0 0.1rem white; border-color: #C5E1A5; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #e57373; } + .p-multiselect { background: #191919; border: 1px solid #4b4b4b; @@ -1359,9 +1450,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.429rem; } @@ -1369,6 +1462,7 @@ color: #888888; right: 2.357rem; } + .p-multiselect-panel { background: #323232; color: #dedede; @@ -1399,7 +1493,7 @@ margin-left: 0.5rem; width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -1457,6 +1551,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-multiselect { background: #4b4b4b; } @@ -1466,12 +1561,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #e57373; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #e57373; } + .p-password-panel { padding: 0.571rem 1rem; background: #323232; @@ -1493,6 +1591,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } + p-password.p-password-clearable .p-password-input { padding-right: 1.858rem; } @@ -1500,6 +1599,7 @@ color: #888888; right: 0.429rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.287rem; } @@ -1507,6 +1607,7 @@ color: #888888; right: 1.858rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1544,9 +1645,11 @@ background: #9CCC65; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e57373; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } @@ -1559,12 +1662,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #9CCC65; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { gap: 0.5rem; } @@ -1595,9 +1701,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b5019f; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #212529; } + .p-selectbutton .p-button { background: #252525; border: 1px solid #252525; @@ -1605,7 +1713,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #888888; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1614,7 +1722,7 @@ color: #dedede; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #dedede; } .p-selectbutton .p-button.p-highlight { @@ -1623,7 +1731,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1632,12 +1740,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #e57373; } + .p-slider { background: #4b4b4b; border: 0 none; @@ -1689,6 +1799,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #252525; border: 1px solid #252525; @@ -1696,7 +1807,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #888888; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1705,7 +1816,7 @@ color: #dedede; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #dedede; } .p-togglebutton.p-button.p-highlight { @@ -1714,7 +1825,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1723,12 +1834,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #e57373; } + .p-treeselect { background: #191919; border: 1px solid #4b4b4b; @@ -1765,12 +1878,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e57373; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.2145rem 0.429rem; } + .p-treeselect-panel { background: #323232; color: #dedede; @@ -1806,7 +1922,7 @@ .p-treeselect-panel .p-treeselect-header .p-treeselect-close { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -1830,6 +1946,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-treeselect { background: #4b4b4b; } @@ -1839,6 +1956,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.429rem; } @@ -1846,6 +1964,7 @@ color: #888888; right: 2.357rem; } + .p-button { color: #212529; background: #C5E1A5; @@ -1957,7 +2076,7 @@ padding: 0.429rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1984,426 +2103,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #b0bec5; border: 1px solid #b0bec5; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #90a4ae; color: #121212; border-color: #90a4ae; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #cfd8dc; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #78909c; color: #121212; border-color: #78909c; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(176, 190, 197, 0.04); color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(176, 190, 197, 0.16); color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #b0bec5; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(176, 190, 197, 0.04); border-color: transparent; color: #b0bec5; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(176, 190, 197, 0.16); border-color: transparent; color: #b0bec5; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #212529; background: #4fc3f7; border: 1px solid #4fc3f7; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #29b6f6; color: #212529; border-color: #29b6f6; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #e1f5fe; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #03a9f4; color: #212529; border-color: #03a9f4; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(79, 195, 247, 0.04); color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(79, 195, 247, 0.16); color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #4fc3f7; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(79, 195, 247, 0.04); border-color: transparent; color: #4fc3f7; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(79, 195, 247, 0.16); border-color: transparent; color: #4fc3f7; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #212529; background: #aed581; border: 1px solid #aed581; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #9ccc65; color: #212529; border-color: #9ccc65; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #f1f8e9; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #8bc34a; color: #212529; border-color: #8bc34a; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(174, 213, 129, 0.04); color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(174, 213, 129, 0.16); color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #aed581; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(174, 213, 129, 0.04); border-color: transparent; color: #aed581; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(174, 213, 129, 0.16); border-color: transparent; color: #aed581; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #ffb74d; border: 1px solid #ffb74d; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffa726; color: #212529; border-color: #ffa726; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #fffde7; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ff9800; color: #212529; border-color: #ff9800; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 183, 77, 0.04); color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 183, 77, 0.16); color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffb74d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 183, 77, 0.04); border-color: transparent; color: #ffb74d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 183, 77, 0.16); border-color: transparent; color: #ffb74d; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #ba68c8; color: #121212; border-color: #ba68c8; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ce93d8; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #ab47bc; color: #121212; border-color: #ab47bc; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #212529; background: #e57373; border: 1px solid #e57373; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #ef5350; color: #212529; border-color: #ef5350; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #ffebee; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #f44336; color: #212529; border-color: #f44336; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(229, 115, 115, 0.04); color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(229, 115, 115, 0.16); color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #e57373; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(229, 115, 115, 0.04); border-color: transparent; color: #e57373; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(229, 115, 115, 0.16); border-color: transparent; color: #e57373; } + .p-button.p-button-link { color: #C5E1A5; background: transparent; @@ -2427,6 +2554,7 @@ color: #C5E1A5; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2438,14 +2566,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2456,45 +2587,52 @@ background: #4d4d4d; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2572,6 +2710,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #b0bec5; @@ -2600,6 +2739,7 @@ border-color: transparent; color: #b0bec5; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #4fc3f7; @@ -2628,6 +2768,7 @@ border-color: transparent; color: #4fc3f7; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #aed581; @@ -2656,6 +2797,7 @@ border-color: transparent; color: #aed581; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffb74d; @@ -2684,6 +2826,7 @@ border-color: transparent; color: #ffb74d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2712,6 +2855,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #e57373; @@ -2740,11 +2884,12 @@ border-color: transparent; color: #e57373; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -2752,13 +2897,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2784,6 +2929,7 @@ background: #C5E1A5; color: #212529; } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2877,29 +3023,29 @@ padding: 0.571rem 0.857rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2929,12 +3075,12 @@ background: #C5E1A5; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #191919; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #252525; } .p-datatable .p-datatable-loading-icon { @@ -3037,6 +3183,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.71375rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3075,14 +3222,16 @@ .p-dataview .p-dataview-emptymessage { padding: 0.571rem 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3106,10 +3255,11 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3125,6 +3275,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-column-filter-overlay { background: #323232; color: #dedede; @@ -3162,6 +3313,7 @@ border-top: 1px solid #4b4b4b; margin: 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.429rem 0.857rem; border-bottom: 1px solid #191919; @@ -3190,6 +3342,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.571rem 1rem; } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -3275,6 +3428,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #4c4c4c; } + .p-orderlist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3283,6 +3437,7 @@ background: #323232; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; @@ -3321,6 +3476,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-paginator { background: #252525; color: #dedede; @@ -3330,9 +3486,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #dedede; @@ -3343,9 +3499,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; border-color: transparent; color: #4c4c4c; @@ -3402,6 +3558,7 @@ border-color: transparent; color: #4c4c4c; } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } @@ -3487,6 +3644,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #4c4c4c; } + .p-picklist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3495,6 +3653,7 @@ background: #323232; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3506,19 +3665,20 @@ background-color: #191919; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #191919; background: #323232; @@ -3544,7 +3704,7 @@ margin-right: 0.5rem; width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3575,11 +3735,11 @@ color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3652,6 +3812,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3739,7 +3900,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3791,7 +3952,7 @@ background: #C5E1A5; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #191919; } .p-treetable .p-treetable-loading-icon { @@ -3852,6 +4013,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.71375rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #191919; color: #dedede; @@ -3876,6 +4038,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #191919; @@ -3924,6 +4087,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 2px; } + .p-card { background: #323232; color: #dedede; @@ -3949,6 +4113,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #323232; } @@ -3972,6 +4137,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #191919; background: #323232; @@ -4012,6 +4178,7 @@ .p-fieldset .p-fieldset-content { padding: 0.571rem 1rem; } + .p-panel .p-panel-header { border: 1px solid #191919; padding: 0.857rem 1rem; @@ -4026,7 +4193,7 @@ .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -4078,6 +4245,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; @@ -4088,6 +4256,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-splitter { border: 1px solid #191919; background: #323232; @@ -4109,6 +4278,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4177,6 +4347,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #191919; border: 1px solid #191919; @@ -4187,6 +4358,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #323232; color: #dedede; @@ -4234,6 +4406,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -4254,7 +4427,7 @@ .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -4306,6 +4479,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #323232; color: #dedede; @@ -4347,6 +4521,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #191919; } + .p-sidebar { background: #323232; color: #dedede; @@ -4357,23 +4532,23 @@ padding: 0.857rem 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -4387,6 +4562,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.857rem 1rem; } + .p-tooltip .p-tooltip-text { background: #4c4c4c; color: #dedede; @@ -4406,6 +4582,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #4c4c4c; } + .p-fileupload .p-fileupload-buttonbar { background: #191919; padding: 0.857rem 1rem; @@ -4445,6 +4622,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #AED581; color: #212529; @@ -4455,6 +4633,7 @@ color: #212529; border-color: #9CCC65; } + .p-breadcrumb { background: #252525; border: 1px solid #191919; @@ -4486,6 +4665,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #dedede; } + .p-contextmenu { padding: 0; background: #252525; @@ -4533,7 +4713,7 @@ color: #212529; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4547,7 +4727,7 @@ color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4558,7 +4738,7 @@ color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-contextmenu .p-menuitem-separator { @@ -4572,6 +4752,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4595,31 +4776,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4678,7 +4860,7 @@ color: #212529; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4692,7 +4874,7 @@ color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4703,7 +4885,7 @@ color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-megamenu .p-megamenu-panel { @@ -4761,9 +4943,10 @@ color: #dedede; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } + .p-menu { padding: 0; background: #252525; @@ -4800,7 +4983,7 @@ color: #212529; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4814,7 +4997,7 @@ color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4825,7 +5008,7 @@ color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menu.p-menu-overlay { @@ -4859,6 +5042,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #252525; @@ -4897,7 +5081,7 @@ color: #dedede; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4928,7 +5112,7 @@ color: #212529; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4942,7 +5126,7 @@ color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4953,7 +5137,7 @@ color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-submenu-list { @@ -4970,6 +5154,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5144,7 +5329,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5158,7 +5343,7 @@ color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5169,7 +5354,7 @@ color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5185,6 +5370,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 2px; } + .p-slidemenu { padding: 0; background: #252525; @@ -5227,7 +5413,7 @@ color: #212529; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5241,7 +5427,7 @@ color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5252,7 +5438,7 @@ color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-slidemenu.p-slidemenu-overlay { @@ -5299,6 +5485,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -5343,6 +5530,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -5413,6 +5601,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.1rem white; } + .p-tieredmenu { padding: 0; background: #252525; @@ -5463,7 +5652,7 @@ color: #212529; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5477,7 +5666,7 @@ color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5488,7 +5677,7 @@ color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-tieredmenu .p-menuitem-separator { @@ -5502,6 +5691,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5557,6 +5747,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5645,6 +5836,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5695,7 +5887,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-success { @@ -5705,7 +5897,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5715,7 +5907,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-error { @@ -5725,9 +5917,10 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #212121; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5758,7 +5951,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5815,7 +6008,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #aeb6bf; @@ -5825,7 +6018,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } @@ -5834,23 +6027,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5874,6 +6073,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #4b4b4b; border-radius: 3px; @@ -5894,9 +6094,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #323232; } + .p-badge { background: #C5E1A5; color: #212529; @@ -5938,6 +6140,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #4b4b4b; color: #dedede; @@ -5973,6 +6176,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5987,6 +6191,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-progressbar { border: 0 none; height: 24px; @@ -6002,6 +6207,7 @@ color: #212529; line-height: 24px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6023,6 +6229,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6030,6 +6237,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #C5E1A5; color: #212529; @@ -6062,6 +6270,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #323232; color: #dedede; diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css index 60e828932ef..b60e2379949 100644 --- a/src/assets/components/themes/luna-pink/theme.css +++ b/src/assets/components/themes/luna-pink/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.5; } + .p-error { color: #e57373; } + .p-text-secondary { color: #888888; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #e57373; } + .p-autocomplete-panel { background: #323232; color: #dedede; @@ -427,9 +440,11 @@ color: #dedede; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e57373; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 1.858rem; } @@ -437,19 +452,23 @@ color: #888888; right: 0.429rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #888888; right: 2.786rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; border-color: #F48FB1; } + .p-datepicker { padding: 0.857rem; background: #323232; @@ -476,23 +495,23 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #dedede; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #F48FB1; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -567,7 +586,7 @@ .p-datepicker .p-timepicker button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 1.858rem; } @@ -664,10 +684,12 @@ color: #888888; right: 0.429rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #888888; right: 2.786rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e57373; } + .p-cascadeselect-panel { background: #323232; color: #dedede; @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #4b4b4b; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e57373; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.429rem; } @@ -768,6 +794,7 @@ color: #888888; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #EC407A; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #4b4b4b; } @@ -831,15 +861,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #EC407A; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #212529; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #F48FB1; } @@ -878,9 +912,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #e57373; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.429rem; } @@ -888,22 +924,26 @@ color: #888888; right: 0.429rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { background: #191919; border: 1px solid #4b4b4b; @@ -947,6 +987,7 @@ .p-dropdown.p-invalid.p-component { border-color: #e57373; } + .p-dropdown-panel { background: #323232; color: #dedede; @@ -1010,6 +1051,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-dropdown { background: #4b4b4b; } @@ -1022,9 +1064,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #e57373; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1037,60 +1087,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #4b4b4b; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #888888; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #888888; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 1.858rem; } @@ -1098,9 +1166,11 @@ color: #888888; right: 0.429rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e57373; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 1.858rem; } @@ -1108,12 +1178,14 @@ color: #888888; right: 0.429rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.786rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.786rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1152,9 +1224,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #F06292; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e57373; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1187,45 +1261,57 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-float-label > label { left: 0.429rem; color: #9b9b9b; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #e57373; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.429rem; color: #888888; } + .p-input-icon-left > .p-inputtext { padding-left: 1.858rem; } + .p-input-icon-left.p-float-label > label { left: 1.858rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.429rem; color: #888888; } + .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + ::-webkit-input-placeholder { color: #9b9b9b; } + :-moz-placeholder { color: #9b9b9b; } + ::-moz-placeholder { color: #9b9b9b; } + :-ms-input-placeholder { color: #9b9b9b; } + .p-input-filled .p-inputtext { background-color: #4b4b4b; } @@ -1235,14 +1321,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #4b4b4b; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox { background: #323232; color: #dedede; @@ -1317,9 +1406,11 @@ box-shadow: 0 0 0 0.1rem white; border-color: #F48FB1; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #e57373; } + .p-multiselect { background: #191919; border: 1px solid #4b4b4b; @@ -1359,9 +1450,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.429rem; } @@ -1369,6 +1462,7 @@ color: #888888; right: 2.357rem; } + .p-multiselect-panel { background: #323232; color: #dedede; @@ -1399,7 +1493,7 @@ margin-left: 0.5rem; width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -1457,6 +1551,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-multiselect { background: #4b4b4b; } @@ -1466,12 +1561,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #e57373; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #e57373; } + .p-password-panel { padding: 0.571rem 1rem; background: #323232; @@ -1493,6 +1591,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #aed581; } + p-password.p-password-clearable .p-password-input { padding-right: 1.858rem; } @@ -1500,6 +1599,7 @@ color: #888888; right: 0.429rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.287rem; } @@ -1507,6 +1607,7 @@ color: #888888; right: 1.858rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1544,9 +1645,11 @@ background: #EC407A; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e57373; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #4b4b4b; } @@ -1559,12 +1662,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #EC407A; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #212529; } + .p-rating { gap: 0.5rem; } @@ -1595,9 +1701,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b5019f; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #212529; } + .p-selectbutton .p-button { background: #252525; border: 1px solid #252525; @@ -1605,7 +1713,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #888888; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1614,7 +1722,7 @@ color: #dedede; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #dedede; } .p-selectbutton .p-button.p-highlight { @@ -1623,7 +1731,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1632,12 +1740,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #e57373; } + .p-slider { background: #4b4b4b; border: 0 none; @@ -1689,6 +1799,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #252525; border: 1px solid #252525; @@ -1696,7 +1807,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #888888; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1705,7 +1816,7 @@ color: #dedede; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #dedede; } .p-togglebutton.p-button.p-highlight { @@ -1714,7 +1825,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1723,12 +1834,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #e57373; } + .p-treeselect { background: #191919; border: 1px solid #4b4b4b; @@ -1765,12 +1878,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e57373; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.2145rem 0.429rem; } + .p-treeselect-panel { background: #323232; color: #dedede; @@ -1806,7 +1922,7 @@ .p-treeselect-panel .p-treeselect-header .p-treeselect-close { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -1830,6 +1946,7 @@ color: #dedede; background: transparent; } + .p-input-filled .p-treeselect { background: #4b4b4b; } @@ -1839,6 +1956,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #4b4b4b; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.429rem; } @@ -1846,6 +1964,7 @@ color: #888888; right: 2.357rem; } + .p-button { color: #212529; background: #F48FB1; @@ -1957,7 +2076,7 @@ padding: 0.429rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1984,426 +2103,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #b0bec5; border: 1px solid #b0bec5; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #90a4ae; color: #121212; border-color: #90a4ae; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #cfd8dc; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #78909c; color: #121212; border-color: #78909c; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(176, 190, 197, 0.04); color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(176, 190, 197, 0.16); color: #b0bec5; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #b0bec5; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(176, 190, 197, 0.04); border-color: transparent; color: #b0bec5; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(176, 190, 197, 0.16); border-color: transparent; color: #b0bec5; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #212529; background: #4fc3f7; border: 1px solid #4fc3f7; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #29b6f6; color: #212529; border-color: #29b6f6; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #e1f5fe; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #03a9f4; color: #212529; border-color: #03a9f4; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(79, 195, 247, 0.04); color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(79, 195, 247, 0.16); color: #4fc3f7; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #4fc3f7; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(79, 195, 247, 0.04); border-color: transparent; color: #4fc3f7; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(79, 195, 247, 0.16); border-color: transparent; color: #4fc3f7; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #212529; background: #aed581; border: 1px solid #aed581; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #9ccc65; color: #212529; border-color: #9ccc65; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #f1f8e9; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #8bc34a; color: #212529; border-color: #8bc34a; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(174, 213, 129, 0.04); color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(174, 213, 129, 0.16); color: #aed581; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #aed581; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(174, 213, 129, 0.04); border-color: transparent; color: #aed581; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(174, 213, 129, 0.16); border-color: transparent; color: #aed581; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #ffb74d; border: 1px solid #ffb74d; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffa726; color: #212529; border-color: #ffa726; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #fffde7; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ff9800; color: #212529; border-color: #ff9800; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 183, 77, 0.04); color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 183, 77, 0.16); color: #ffb74d; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffb74d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 183, 77, 0.04); border-color: transparent; color: #ffb74d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 183, 77, 0.16); border-color: transparent; color: #ffb74d; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #ba68c8; color: #121212; border-color: #ba68c8; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ce93d8; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #ab47bc; color: #121212; border-color: #ab47bc; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #212529; background: #e57373; border: 1px solid #e57373; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #ef5350; color: #212529; border-color: #ef5350; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #ffebee; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #f44336; color: #212529; border-color: #f44336; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(229, 115, 115, 0.04); color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(229, 115, 115, 0.16); color: #e57373; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #e57373; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(229, 115, 115, 0.04); border-color: transparent; color: #e57373; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(229, 115, 115, 0.16); border-color: transparent; color: #e57373; } + .p-button.p-button-link { color: #F48FB1; background: transparent; @@ -2427,6 +2554,7 @@ color: #F48FB1; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2438,14 +2566,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2456,45 +2587,52 @@ background: #4d4d4d; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2572,6 +2710,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #b0bec5; @@ -2600,6 +2739,7 @@ border-color: transparent; color: #b0bec5; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #4fc3f7; @@ -2628,6 +2768,7 @@ border-color: transparent; color: #4fc3f7; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #aed581; @@ -2656,6 +2797,7 @@ border-color: transparent; color: #aed581; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffb74d; @@ -2684,6 +2826,7 @@ border-color: transparent; color: #ffb74d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2712,6 +2855,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #e57373; @@ -2740,11 +2884,12 @@ border-color: transparent; color: #e57373; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -2752,13 +2897,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2784,6 +2929,7 @@ background: #F48FB1; color: #212529; } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2877,29 +3023,29 @@ padding: 0.571rem 0.857rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -2929,12 +3075,12 @@ background: #F48FB1; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #191919; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #252525; } .p-datatable .p-datatable-loading-icon { @@ -3037,6 +3183,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.71375rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3075,14 +3222,16 @@ .p-dataview .p-dataview-emptymessage { padding: 0.571rem 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3106,10 +3255,11 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3125,6 +3275,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-column-filter-overlay { background: #323232; color: #dedede; @@ -3162,6 +3313,7 @@ border-top: 1px solid #4b4b4b; margin: 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.429rem 0.857rem; border-bottom: 1px solid #191919; @@ -3190,6 +3342,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.571rem 1rem; } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -3275,6 +3428,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #4c4c4c; } + .p-orderlist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3283,6 +3437,7 @@ background: #323232; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #4c4c4c; color: #dedede; @@ -3321,6 +3476,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-paginator { background: #252525; color: #dedede; @@ -3330,9 +3486,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #dedede; @@ -3343,9 +3499,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; border-color: transparent; color: #4c4c4c; @@ -3402,6 +3558,7 @@ border-color: transparent; color: #4c4c4c; } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } @@ -3487,6 +3644,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #4c4c4c; } + .p-picklist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3495,6 +3653,7 @@ background: #323232; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3506,19 +3665,20 @@ background-color: #191919; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #191919; background: #323232; @@ -3544,7 +3704,7 @@ margin-right: 0.5rem; width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3575,11 +3735,11 @@ color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #212529; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3652,6 +3812,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3739,7 +3900,7 @@ .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -3791,7 +3952,7 @@ background: #F48FB1; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #191919; } .p-treetable .p-treetable-loading-icon { @@ -3852,6 +4013,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.71375rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #191919; color: #dedede; @@ -3876,6 +4038,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #191919; @@ -3924,6 +4087,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 2px; } + .p-card { background: #323232; color: #dedede; @@ -3949,6 +4113,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #323232; } @@ -3972,6 +4137,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #191919; background: #323232; @@ -4012,6 +4178,7 @@ .p-fieldset .p-fieldset-content { padding: 0.571rem 1rem; } + .p-panel .p-panel-header { border: 1px solid #191919; padding: 0.857rem 1rem; @@ -4026,7 +4193,7 @@ .p-panel .p-panel-header .p-panel-header-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -4078,6 +4245,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; @@ -4088,6 +4256,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-splitter { border: 1px solid #191919; background: #323232; @@ -4109,6 +4278,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4177,6 +4347,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #191919; border: 1px solid #191919; @@ -4187,6 +4358,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #323232; color: #dedede; @@ -4234,6 +4406,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -4254,7 +4427,7 @@ .p-dialog .p-dialog-header .p-dialog-header-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; @@ -4306,6 +4479,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #323232; color: #dedede; @@ -4347,6 +4521,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #191919; } + .p-sidebar { background: #323232; color: #dedede; @@ -4357,23 +4532,23 @@ padding: 0.857rem 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; - color: rgba(136, 136, 136, 0.5333333333); + color: #8888; border: 0 none; background: transparent; border-radius: 50%; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #dedede; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem white; @@ -4387,6 +4562,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.857rem 1rem; } + .p-tooltip .p-tooltip-text { background: #4c4c4c; color: #dedede; @@ -4406,6 +4582,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #4c4c4c; } + .p-fileupload .p-fileupload-buttonbar { background: #191919; padding: 0.857rem 1rem; @@ -4445,6 +4622,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #F06292; color: #212529; @@ -4455,6 +4633,7 @@ color: #212529; border-color: #EC407A; } + .p-breadcrumb { background: #252525; border: 1px solid #191919; @@ -4486,6 +4665,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #dedede; } + .p-contextmenu { padding: 0; background: #252525; @@ -4533,7 +4713,7 @@ color: #212529; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4547,7 +4727,7 @@ color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4558,7 +4738,7 @@ color: #dedede; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-contextmenu .p-menuitem-separator { @@ -4572,6 +4752,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4595,31 +4776,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4678,7 +4860,7 @@ color: #212529; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4692,7 +4874,7 @@ color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4703,7 +4885,7 @@ color: #dedede; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-megamenu .p-megamenu-panel { @@ -4761,9 +4943,10 @@ color: #dedede; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } + .p-menu { padding: 0; background: #252525; @@ -4800,7 +4983,7 @@ color: #212529; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4814,7 +4997,7 @@ color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4825,7 +5008,7 @@ color: #dedede; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menu.p-menu-overlay { @@ -4859,6 +5042,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #252525; @@ -4897,7 +5081,7 @@ color: #dedede; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4928,7 +5112,7 @@ color: #212529; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4942,7 +5126,7 @@ color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4953,7 +5137,7 @@ color: #dedede; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-menubar .p-submenu-list { @@ -4970,6 +5154,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5144,7 +5329,7 @@ color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5158,7 +5343,7 @@ color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5169,7 +5354,7 @@ color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5185,6 +5370,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 2px; } + .p-slidemenu { padding: 0; background: #252525; @@ -5227,7 +5413,7 @@ color: #212529; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5241,7 +5427,7 @@ color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5252,7 +5438,7 @@ color: #dedede; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-slidemenu.p-slidemenu-overlay { @@ -5299,6 +5485,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -5343,6 +5530,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -5413,6 +5601,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.1rem white; } + .p-tieredmenu { padding: 0; background: #252525; @@ -5463,7 +5652,7 @@ color: #212529; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #212529; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5477,7 +5666,7 @@ color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5488,7 +5677,7 @@ color: #dedede; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #dedede; } .p-tieredmenu .p-menuitem-separator { @@ -5502,6 +5691,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5557,6 +5747,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5645,6 +5836,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5695,7 +5887,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-success { @@ -5705,7 +5897,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5715,7 +5907,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-error { @@ -5725,9 +5917,10 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #212121; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5758,7 +5951,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5815,7 +6008,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #aeb6bf; @@ -5825,7 +6018,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } @@ -5834,23 +6027,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5874,6 +6073,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #4b4b4b; border-radius: 3px; @@ -5894,9 +6094,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #323232; } + .p-badge { background: #F48FB1; color: #212529; @@ -5938,6 +6140,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #4b4b4b; color: #dedede; @@ -5973,6 +6176,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5987,6 +6191,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-progressbar { border: 0 none; height: 24px; @@ -6002,6 +6207,7 @@ color: #212529; line-height: 24px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6023,6 +6229,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6030,6 +6237,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #F48FB1; color: #212529; @@ -6062,6 +6270,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #323232; color: #dedede; diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css index ad8303810c3..54a6c748921 100644 --- a/src/assets/components/themes/md-dark-deeppurple/theme.css +++ b/src/assets/components/themes/md-dark-deeppurple/theme.css @@ -54,21 +54,24 @@ font-family: "Roboto"; font-style: normal; font-weight: 400; - src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; - src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; - src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f4fafe; @@ -241,7 +244,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 1rem 1rem; @@ -296,32 +299,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.32); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.38; } + .p-error { color: #f44435; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -333,12 +344,15 @@ outline-offset: 0; 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; @@ -355,6 +369,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 1rem; } @@ -387,7 +402,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.5rem 1rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -395,12 +410,13 @@ margin-left: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.87); } .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-autocomplete-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -429,11 +445,11 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { margin: 0; @@ -447,9 +463,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f44435; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 3rem; } @@ -457,24 +475,28 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 4rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #CE93D8; } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -491,12 +513,12 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -506,13 +528,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -521,14 +543,14 @@ line-height: 2.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 500; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #CE93D8; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -575,13 +597,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 1rem 0; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -640,7 +662,7 @@ background: rgba(206, 147, 216, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0, 0%, 100%, 0.12); + border-left: 1px solid rgba(255, 255, 255, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -677,6 +699,7 @@ outline-offset: 0; box-shadow: none; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 3rem; } @@ -684,10 +707,12 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 4rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -695,7 +720,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -730,6 +755,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44435; } + .p-cascadeselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -757,11 +783,11 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { padding: 1rem 1rem; @@ -769,18 +795,21 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44435; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 1rem; } @@ -788,6 +817,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -796,12 +826,13 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 18px; height: 18px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -836,27 +867,32 @@ background: #CE93D8; color: #121212; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; } + .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #CE93D8; } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #CE93D8; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(255, 255, 255, 0.6); } @@ -873,12 +909,12 @@ .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.87); } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -895,9 +931,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f44435; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 2rem; } @@ -905,25 +943,29 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #2b2b2b; border: 1px solid #1e1e1e; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -964,6 +1006,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f44435; } + .p-dropdown-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -973,7 +1016,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1009,11 +1052,11 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -1027,87 +1070,114 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f44435; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0, 0%, 100%, 0.3); - border-left: 1px solid hsla(0, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); + border-top: 1px solid rgba(255, 255, 255, 0.3); + border-left: 1px solid rgba(255, 255, 255, 0.3); + border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 1rem 1rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0, 0%, 100%, 0.3); + border-right: 1px solid rgba(255, 255, 255, 0.3); } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 1rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 1rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 3rem; } @@ -1115,9 +1185,11 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44435; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 3rem; } @@ -1125,18 +1197,20 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 4rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 4rem; } + .p-inputswitch { width: 2.75rem; height: 1rem; } .p-inputswitch .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; } @@ -1158,7 +1232,7 @@ box-shadow: none; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); @@ -1169,9 +1243,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44435; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,7 +1255,7 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 1rem 1rem; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1204,72 +1280,87 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-float-label > label { left: 1rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f44435; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 1rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 3rem; } + .p-input-icon-left.p-float-label > label { left: 3rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 1rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 3rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.875rem 0.875rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-listbox .p-listbox-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1322,11 +1413,11 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-listbox.p-focus { outline: 0 none; @@ -1334,12 +1425,14 @@ box-shadow: none; border-color: #CE93D8; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f44435; } + .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1362,7 +1455,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1376,9 +1469,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 2rem; } @@ -1386,6 +1481,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1395,7 +1491,7 @@ } .p-multiselect-panel .p-multiselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1453,11 +1549,11 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1474,21 +1570,25 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f44435; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f44435; } + .p-password-panel { padding: 1rem; background: #1e1e1e; @@ -1510,6 +1610,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 3rem; } @@ -1517,6 +1618,7 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 5rem; } @@ -1524,12 +1626,13 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-radiobutton { width: 20px; height: 20px; } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; width: 20px; height: 20px; @@ -1561,14 +1664,16 @@ background: #121212; color: #CE93D8; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44435; } + .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #121212; @@ -1576,9 +1681,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #121212; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1609,6 +1716,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f44435; } + .p-selectbutton .p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); @@ -1616,7 +1724,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1625,7 +1733,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1634,7 +1742,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight:hover { @@ -1643,14 +1751,16 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f44435; } + .p-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); border: 0 none; border-radius: 4px; } @@ -1700,6 +1810,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); @@ -1707,7 +1818,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1716,7 +1827,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1725,7 +1836,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight:hover { @@ -1734,15 +1845,17 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f44435; } + .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1765,7 +1878,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1776,12 +1889,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44435; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.5rem 1rem; } + .p-treeselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1791,7 +1907,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1841,15 +1957,17 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 2rem; } @@ -1857,6 +1975,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-button { color: #121212; background: #CE93D8; @@ -1968,7 +2087,7 @@ padding: 0.714rem; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1995,426 +2114,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #A5D6A7; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: rgba(165, 214, 167, 0.92); color: #121212; border-color: transparent; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: rgba(165, 214, 167, 0.68); color: #121212; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #A5D6A7; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(165, 214, 167, 0.04); color: #A5D6A7; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(165, 214, 167, 0.16); color: #A5D6A7; border: 0 none; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #A5D6A7; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(165, 214, 167, 0.04); border-color: transparent; color: #A5D6A7; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(165, 214, 167, 0.16); border-color: transparent; color: #A5D6A7; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #212121; background: #90caf9; border: 0 none; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: rgba(144, 202, 249, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: rgba(144, 202, 249, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(144, 202, 249, 0.04); color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(144, 202, 249, 0.16); color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #90caf9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(144, 202, 249, 0.04); border-color: transparent; color: #90caf9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(144, 202, 249, 0.16); border-color: transparent; color: #90caf9; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #212121; background: #c5e1a5; border: 0 none; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: rgba(197, 225, 165, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: rgba(197, 225, 165, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212121; background: #fff59d; border: 0 none; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: rgba(255, 245, 157, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: rgba(255, 245, 157, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 245, 157, 0.04); color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 245, 157, 0.16); color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fff59d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 245, 157, 0.04); border-color: transparent; color: #fff59d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 245, 157, 0.16); border-color: transparent; color: #fff59d; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #212121; background: #ce93d8; border: 0 none; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: rgba(206, 147, 216, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: rgba(206, 147, 216, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #212121; background: #ef9a9a; border: 0 none; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: rgba(239, 154, 154, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: rgba(239, 154, 154, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 154, 154, 0.04); color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 154, 154, 0.16); color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef9a9a; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 154, 154, 0.04); border-color: transparent; color: #ef9a9a; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 154, 154, 0.16); border-color: transparent; color: #ef9a9a; } + .p-button.p-button-link { color: #CE93D8; background: transparent; @@ -2438,6 +2565,7 @@ color: #CE93D8; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2449,14 +2577,17 @@ width: 2rem; height: 2rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: none; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2467,45 +2598,52 @@ background: rgba(165, 214, 167, 0.92); color: #212121; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.32); } + .p-splitbutton { border-radius: 4px; } @@ -2583,6 +2721,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #A5D6A7; @@ -2611,6 +2750,7 @@ border-color: transparent; color: #A5D6A7; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #90caf9; @@ -2639,6 +2779,7 @@ border-color: transparent; color: #90caf9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2667,6 +2808,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fff59d; @@ -2695,6 +2837,7 @@ border-color: transparent; color: #fff59d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2723,6 +2866,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ef9a9a; @@ -2751,8 +2895,9 @@ border-color: transparent; color: #ef9a9a; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -2763,13 +2908,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2795,6 +2940,7 @@ background: rgba(206, 147, 216, 0.16); color: #CE93D8; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2888,9 +3034,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -2900,17 +3046,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2940,12 +3086,12 @@ background: #CE93D8; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1e1e1e; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1e1e1e; } .p-datatable .p-datatable-loading-icon { @@ -3048,6 +3194,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3086,10 +3233,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2.5rem; height: 2.5rem; @@ -3117,6 +3266,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-clear-button { width: 2.5rem; height: 2.5rem; @@ -3136,6 +3286,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-overlay { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -3162,7 +3313,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3170,12 +3321,13 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3184,7 +3336,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3201,6 +3353,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3258,12 +3411,12 @@ transition: none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #CE93D8; @@ -3277,15 +3430,16 @@ color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list:not(.cdk-drop-list-dragging) .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 1rem 1rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3294,8 +3448,9 @@ background: #1e1e1e; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3332,6 +3487,7 @@ outline-offset: 0; box-shadow: none; } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3341,9 +3497,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3354,9 +3510,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); border-color: transparent; color: rgba(255, 255, 255, 0.6); @@ -3413,6 +3569,7 @@ border-color: transparent; color: rgba(255, 255, 255, 0.6); } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3470,12 +3627,12 @@ transition: none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #CE93D8; @@ -3489,15 +3646,16 @@ color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list:not(.cdk-drop-list-dragging) .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 1rem 1rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3506,6 +3664,7 @@ background: #1e1e1e; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3517,19 +3676,20 @@ background-color: #bdbdbd; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3586,19 +3746,19 @@ color: #CE93D8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #CE93D8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #CE93D8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -3655,7 +3815,7 @@ color: inherit; } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content:focus { @@ -3663,6 +3823,7 @@ outline-offset: 0; box-shadow: none; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3802,7 +3963,7 @@ background: #CE93D8; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1e1e1e; } .p-treetable .p-treetable-loading-icon { @@ -3863,6 +4024,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3887,6 +4049,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.5rem; border: 0 none; @@ -3959,6 +4122,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3984,6 +4148,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3992,7 +4157,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0, 0%, 100%, 0.12); + border-top: 1px rgba(255, 255, 255, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4002,11 +4167,12 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0, 0%, 100%, 0.12); + border-left: 1px rgba(255, 255, 255, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -4047,6 +4213,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid rgba(255, 255, 255, 0.12); padding: 1rem; @@ -4113,6 +4280,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; @@ -4123,6 +4291,7 @@ outline-offset: 0; box-shadow: none; } + .p-splitter { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -4131,10 +4300,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4142,8 +4311,9 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4212,6 +4382,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4222,6 +4393,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4269,6 +4441,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4341,6 +4514,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4382,6 +4556,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #262626; } + .p-sidebar { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4392,7 +4567,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -4402,13 +4577,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -4422,6 +4597,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #444444; color: rgba(255, 255, 255, 0.87); @@ -4441,6 +4617,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #444444; } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4480,6 +4657,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: rgba(206, 147, 216, 0.92); color: #121212; @@ -4490,6 +4668,7 @@ color: #121212; border-color: transparent; } + .p-breadcrumb { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4521,6 +4700,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.5rem 0; background: #2b2b2b; @@ -4568,7 +4748,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4576,13 +4756,13 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4593,11 +4773,11 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4607,6 +4787,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4630,31 +4811,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4713,7 +4895,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4721,13 +4903,13 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4738,7 +4920,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-megamenu .p-megamenu-panel { @@ -4761,7 +4943,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -4796,9 +4978,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } + .p-menu { padding: 0.5rem 0; background: #1e1e1e; @@ -4835,7 +5018,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4843,13 +5026,13 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4860,7 +5043,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menu.p-menu-overlay { @@ -4878,7 +5061,7 @@ border-top-left-radius: 0; } .p-menu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menu .p-menuitem-badge { @@ -4894,6 +5077,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 1rem; background: #1e1e1e; @@ -4932,7 +5116,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4963,7 +5147,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4971,13 +5155,13 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4988,7 +5172,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-submenu-list { @@ -4999,12 +5183,13 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5036,7 +5221,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5179,7 +5364,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5187,13 +5372,13 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5204,14 +5389,14 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -5244,6 +5429,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5286,7 +5472,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5294,13 +5480,13 @@ } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5311,7 +5497,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu.p-slidemenu-overlay { @@ -5326,7 +5512,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-slidemenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5358,6 +5544,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5394,7 +5581,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); width: 100%; top: 50%; left: 0; @@ -5402,6 +5589,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -5472,6 +5660,7 @@ outline-offset: 0; box-shadow: inset none; } + .p-tieredmenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5522,7 +5711,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5530,13 +5719,13 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5547,11 +5736,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -5561,6 +5750,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 1rem 1rem; margin: 0; @@ -5616,6 +5806,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5704,6 +5895,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5754,7 +5946,7 @@ color: #01579b; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { @@ -5764,7 +5956,7 @@ color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5774,7 +5966,7 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { @@ -5784,9 +5976,10 @@ color: #b71c1c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #b71c1c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5817,7 +6010,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5874,7 +6067,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -5884,7 +6077,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } @@ -5893,23 +6086,29 @@ outline-offset: 0; box-shadow: none; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5933,8 +6132,9 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: rgba(255, 255, 255, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -5953,9 +6153,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1e1e1e; } + .p-badge { background: #CE93D8; color: #121212; @@ -5997,8 +6199,9 @@ height: 3rem; line-height: 3rem; } + .p-chip { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 1rem; @@ -6032,6 +6235,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -6046,6 +6250,7 @@ outline-offset: 0; box-shadow: none; } + .p-progressbar { border: 0 none; height: 4px; @@ -6061,6 +6266,7 @@ color: #121212; line-height: 4px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6082,6 +6288,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -6089,6 +6296,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #CE93D8; color: #121212; @@ -6121,6 +6329,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -6172,15 +6381,17 @@ .p-accordion .p-accordion-tab .p-accordion-header.p-disabled .p-accordion-header-link > * { opacity: 0.38; } + .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-input-filled .p-autocomplete .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6190,13 +6401,13 @@ background-color: transparent; } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6204,9 +6415,11 @@ background-image: none; background: transparent; } + .p-float-label .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding-top: 0; padding-bottom: 0; @@ -6236,18 +6449,21 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-breadcrumb .p-menuitem-link { padding: 0.25rem 0.5rem; } .p-breadcrumb .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-button { font-weight: 500; min-width: 4rem; @@ -6299,98 +6515,105 @@ .p-button.p-button-raised:enabled:focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - .p-button.p-button-secondary:enabled:focus, .p-button-group.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + + .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(165, 214, 167, 0.76); } - .p-button.p-button-secondary:enabled:active, .p-button-group.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { background: rgba(165, 214, 167, 0.68); } - .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-button-group.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { background: rgba(165, 214, 167, 0.12); } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-button-group.p-button-secondary > .p-button.p-button-text:enabled:active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { background: rgba(165, 214, 167, 0.16); } - .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { + .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { background-color: rgba(165, 214, 167, 0.16); } - .p-button.p-button-info:enabled:focus, .p-button-group.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + + .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(144, 202, 249, 0.76); } - .p-button.p-button-info:enabled:active, .p-button-group.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { background: rgba(144, 202, 249, 0.68); } - .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-button-group.p-button-info > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { background: rgba(144, 202, 249, 0.12); } - .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-button-group.p-button-info > .p-button.p-button-text:enabled:active, .p-button-group.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { background: rgba(144, 202, 249, 0.16); } - .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { + .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { background-color: rgba(144, 202, 249, 0.16); } - .p-button.p-button-success:enabled:focus, .p-button-group.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + + .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(197, 225, 165, 0.76); } - .p-button.p-button-success:enabled:active, .p-button-group.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { background: rgba(197, 225, 165, 0.68); } - .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-button-group.p-button-success > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { background: rgba(197, 225, 165, 0.12); } - .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-button-group.p-button-success > .p-button.p-button-text:enabled:active, .p-button-group.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { background: rgba(197, 225, 165, 0.16); } - .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { + .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { background-color: rgba(197, 225, 165, 0.16); } - .p-button.p-button-warning:enabled:focus, .p-button-group.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + + .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(255, 245, 157, 0.76); } - .p-button.p-button-warning:enabled:active, .p-button-group.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { background: rgba(255, 245, 157, 0.68); } - .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-button-group.p-button-warning > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { background: rgba(255, 245, 157, 0.12); } - .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-button-group.p-button-warning > .p-button.p-button-text:enabled:active, .p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { background: rgba(255, 245, 157, 0.16); } - .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { + .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { background-color: rgba(255, 245, 157, 0.16); } - .p-button.p-button-help:enabled:focus, .p-button-group.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + + .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(206, 147, 216, 0.76); } - .p-button.p-button-help:enabled:active, .p-button-group.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { background: rgba(206, 147, 216, 0.68); } - .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-button-group.p-button-help > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { background: rgba(206, 147, 216, 0.12); } - .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-button-group.p-button-help > .p-button.p-button-text:enabled:active, .p-button-group.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { background: rgba(206, 147, 216, 0.16); } - .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { + .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { background-color: rgba(206, 147, 216, 0.16); } - .p-button.p-button-danger:enabled:focus, .p-button-group.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + + .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(239, 154, 154, 0.76); } - .p-button.p-button-danger:enabled:active, .p-button-group.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { background: rgba(239, 154, 154, 0.68); } - .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-button-group.p-button-danger > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { background: rgba(239, 154, 154, 0.12); } - .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-button-group.p-button-danger > .p-button.p-button-text:enabled:active, .p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { background: rgba(239, 154, 154, 0.16); } - .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { + .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } + .p-calendar-w-btn { - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6435,6 +6658,7 @@ .p-calendar-w-btn.p-calendar-disabled .p-inputtext { opacity: 1; } + .p-datepicker .p-datepicker-header { border-bottom: 0 none; } @@ -6449,7 +6673,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6460,6 +6684,7 @@ .p-datepicker table td.p-datepicker-today.p-highlight { box-shadow: 0 0 0 1px rgba(206, 147, 216, 0.16); } + p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } @@ -6472,12 +6697,13 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled .p-calendar-w-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6487,13 +6713,13 @@ background-color: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6527,6 +6753,7 @@ border: 0 none; background-image: none; } + .p-cascadeselect .p-inputtext, .p-cascadeselect .p-cascadeselect-trigger { background-image: none; background: transparent; @@ -6537,15 +6764,17 @@ .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-cascadeselect-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } + .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6555,13 +6784,13 @@ background-color: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6587,6 +6816,7 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + .p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -6606,27 +6836,30 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #A5D6A7; color: #121212; } + .p-checkbox { border-radius: 50%; transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -6654,12 +6887,14 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12); } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #1e1e1e; } .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { background-color: #1e1e1e; } + @keyframes checkbox-check { 0% { width: 0; @@ -6682,12 +6917,13 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6697,13 +6933,13 @@ background-color: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6711,9 +6947,11 @@ background-image: none; background: transparent; } + .p-float-label .p-chips-multiple-container .p-chips-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-token { padding-top: 0; padding-bottom: 0; @@ -6735,9 +6973,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-datatable .p-sortable-column { outline: 0 none; } @@ -6750,12 +6990,14 @@ .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus { background-color: rgba(255, 255, 255, 0.03); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #CE93D8; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #CE93D8; } + .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; @@ -6766,15 +7008,17 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-dropdown-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } + .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6784,13 +7028,13 @@ background-color: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6812,9 +7056,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-galleria .p-galleria-indicators { padding: 1rem; } @@ -6826,30 +7072,32 @@ background: rgba(165, 214, 167, 0.68); color: #121212; } + .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } .p-inputtext:enabled:focus.ng-invalid.ng-dirty { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled .p-inputtext { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6861,12 +7109,13 @@ box-shadow: none; border-color: transparent; } + .p-input-filled .p-inputgroup .p-inputgroup-addon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6875,24 +7124,26 @@ border-right-color: transparent; } .p-input-filled .p-inputgroup-addon:first-child, - .p-input-filled .p-inputgroup button:first-child, - .p-input-filled .p-inputgroup input:first-child { +.p-input-filled .p-inputgroup button:first-child, +.p-input-filled .p-inputgroup input:first-child { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:first-child input { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup-addon:last-child, - .p-input-filled .p-inputgroup button:last-child, - .p-input-filled .p-inputgroup input:last-child { +.p-input-filled .p-inputgroup button:last-child, +.p-input-filled .p-inputgroup input:last-child { border-bottom-right-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:last-child input { border-bottom-right-radius: 0; } + p-inputmask.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled p-inputmask.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); @@ -6901,9 +7152,11 @@ box-shadow: none; border-color: transparent; } + p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled p-inputnumber.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); @@ -6912,6 +7165,7 @@ box-shadow: none; border-color: transparent; } + .p-inputswitch .p-inputswitch-slider:before { transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); @@ -6928,45 +7182,51 @@ .p-inputswitch.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } + .p-fieldset .p-fieldset-legend { border: 0 none; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { background: rgba(255, 255, 255, 0.12); } + .p-float-label input:focus ~ label, - .p-float-label input.p-filled ~ label, - .p-float-label textarea:focus ~ label, - .p-float-label textarea.p-filled ~ label, - .p-float-label .p-inputwrapper-focus ~ label, - .p-float-label .p-inputwrapper-filled ~ label { +.p-float-label input.p-filled ~ label, +.p-float-label textarea:focus ~ label, +.p-float-label textarea.p-filled ~ label, +.p-float-label .p-inputwrapper-focus ~ label, +.p-float-label .p-inputwrapper-filled ~ label { top: -0.5rem !important; background-color: #1e1e1e; padding: 2px 4px; margin-left: -4px; margin-top: 0; } + .p-float-label textarea ~ label { margin-top: 0; } + .p-float-label input:focus ~ label, - .p-float-label .p-inputwrapper-focus ~ label { +.p-float-label .p-inputwrapper-focus ~ label { color: #CE93D8; } + .p-input-filled .p-float-label .p-inputtext { padding-top: 1.5rem; padding-bottom: 0.5rem; } .p-input-filled .p-float-label input:focus ~ label, - .p-input-filled .p-float-label input.p-filled ~ label, - .p-input-filled .p-float-label textarea:focus ~ label, - .p-input-filled .p-float-label textarea.p-filled ~ label, - .p-input-filled .p-float-label .p-inputwrapper-focus ~ label, - .p-input-filled .p-float-label .p-inputwrapper-filled ~ label { +.p-input-filled .p-float-label input.p-filled ~ label, +.p-input-filled .p-float-label textarea:focus ~ label, +.p-input-filled .p-float-label textarea.p-filled ~ label, +.p-input-filled .p-float-label .p-inputwrapper-focus ~ label, +.p-input-filled .p-float-label .p-inputwrapper-filled ~ label { top: 0.25rem !important; margin-top: 0; background: transparent; } + .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } @@ -6976,21 +7236,25 @@ .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-menu .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -7001,6 +7265,7 @@ .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } @@ -7013,12 +7278,13 @@ .p-multiselect-panel .p-multiselect-close:focus { background: rgba(255, 255, 255, 0.12); } + .p-input-filled .p-multiselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7028,13 +7294,13 @@ background-color: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7046,11 +7312,13 @@ background-image: none; background: transparent; } + .p-float-label .p-multiselect-label .p-multiselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-multiselect .p-multiselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -7079,18 +7347,22 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-orderlist .p-orderlist-list .p-orderlist-item:focus { background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } + .p-paginator { justify-content: flex-end; } @@ -7100,13 +7372,14 @@ .p-paginator .p-paginator-element:focus.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-panel { border-radius: 4px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); } .p-panel .p-panel-header, - .p-panel .p-panel-content, - .p-panel .p-panel-footer { +.p-panel .p-panel-content, +.p-panel .p-panel-footer { border: 0 none; } .p-panel .p-panel-content { @@ -7118,6 +7391,7 @@ .p-panel .p-panel-header-icon:focus { background: rgba(255, 255, 255, 0.12); } + .p-panelmenu .p-panelmenu-panel { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; @@ -7153,27 +7427,30 @@ .p-panelmenu .p-panelmenu-panel .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item:focus { background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-progressbar { border-radius: 0; } .p-progressbar .p-progressbar-label { display: none !important; } + .p-radiobutton { border-radius: 50%; transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -7190,12 +7467,14 @@ .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12); } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #1e1e1e; } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #1e1e1e; } + .p-rating { gap: 0; } @@ -7217,6 +7496,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item { background: rgba(244, 68, 53, 0.04); } + .p-selectbutton .p-button:focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); @@ -7225,12 +7505,14 @@ background: #262626; border-color: rgba(255, 255, 255, 0.12); } + .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-slider .p-slider-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); @@ -7241,6 +7523,7 @@ .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } + .p-steps { padding: 1rem 0; } @@ -7293,6 +7576,7 @@ .p-steps .p-steps-item.p-disabled { opacity: 1; } + .p-tabview .p-tabview-nav { position: relative; } @@ -7315,9 +7599,11 @@ background-color: #CE93D8; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-toolbar { border: 0 none; } + .p-tooltip .p-tooltip-text { box-shadow: none; font-size: 0.875rem; @@ -7325,12 +7611,14 @@ .p-tooltip .p-tooltip-arrow { display: none; } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; @@ -7341,15 +7629,17 @@ .p-treeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-treeselect-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } + .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7359,13 +7649,13 @@ background-color: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7377,11 +7667,13 @@ background-image: none; background: transparent; } + .p-float-label .p-treeselect-label .p-treeselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-treeselect .p-treeselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -7410,9 +7702,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + .p-treeselect.p-invalid:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-tree .p-tree-container .p-treenode { outline: 0 none; } @@ -7422,6 +7716,7 @@ .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-treetable .p-sortable-column { outline: 0 none; } @@ -7434,6 +7729,7 @@ .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus { background-color: rgba(255, 255, 255, 0.03); } + .p-tabmenu .p-tabmenu-nav { position: relative; } @@ -7458,12 +7754,14 @@ background-color: #CE93D8; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { margin: 0.5rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { margin: 0 0.5rem; } + .p-togglebutton.p-button:focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); @@ -7472,6 +7770,7 @@ background: #262626; border-color: rgba(255, 255, 255, 0.12); } + .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(206, 147, 216, 0.12); } @@ -7503,45 +7802,53 @@ .p-splitbutton.p-button-raised > .p-button:not(:disabled):focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(165, 214, 167, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { background: rgba(165, 214, 167, 0.16); } + .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(144, 202, 249, 0.12); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active { background: rgba(144, 202, 249, 0.16); } + .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(197, 225, 165, 0.12); } .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active { background: rgba(197, 225, 165, 0.16); } + .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(255, 245, 157, 0.12); } .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active { background: rgba(255, 245, 157, 0.16); } + .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(206, 147, 216, 0.12); } .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active { background: rgba(206, 147, 216, 0.16); } + .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(239, 154, 154, 0.12); } .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(239, 154, 154, 0.16); } + .p-scrollpanel .p-scrollpanel-bar:focus { box-shadow: 0 0 1px 4px rgba(165, 214, 167, 0.2); } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css index 26d8861801b..129ec07972b 100644 --- a/src/assets/components/themes/md-dark-indigo/theme.css +++ b/src/assets/components/themes/md-dark-indigo/theme.css @@ -54,21 +54,24 @@ font-family: "Roboto"; font-style: normal; font-weight: 400; - src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; - src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; - src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f4fafe; @@ -241,7 +244,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 1rem 1rem; @@ -296,32 +299,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.32); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.38; } + .p-error { color: #f44435; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -333,12 +344,15 @@ outline-offset: 0; 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; @@ -355,6 +369,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 1rem; } @@ -387,7 +402,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.5rem 1rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -395,12 +410,13 @@ margin-left: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.87); } .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-autocomplete-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -429,11 +445,11 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { margin: 0; @@ -447,9 +463,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f44435; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 3rem; } @@ -457,24 +475,28 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 4rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #9FA8DA; } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -491,12 +513,12 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -506,13 +528,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -521,14 +543,14 @@ line-height: 2.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 500; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #9FA8DA; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -575,13 +597,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 1rem 0; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -640,7 +662,7 @@ background: rgba(159, 168, 218, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0, 0%, 100%, 0.12); + border-left: 1px solid rgba(255, 255, 255, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -677,6 +699,7 @@ outline-offset: 0; box-shadow: none; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 3rem; } @@ -684,10 +707,12 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 4rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -695,7 +720,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -730,6 +755,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44435; } + .p-cascadeselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -757,11 +783,11 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { padding: 1rem 1rem; @@ -769,18 +795,21 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44435; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 1rem; } @@ -788,6 +817,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -796,12 +826,13 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 18px; height: 18px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -836,27 +867,32 @@ background: #9FA8DA; color: #121212; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; } + .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #9FA8DA; } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9FA8DA; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(255, 255, 255, 0.6); } @@ -873,12 +909,12 @@ .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.87); } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -895,9 +931,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f44435; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 2rem; } @@ -905,25 +943,29 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #2b2b2b; border: 1px solid #1e1e1e; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -964,6 +1006,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f44435; } + .p-dropdown-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -973,7 +1016,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1009,11 +1052,11 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -1027,87 +1070,114 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f44435; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0, 0%, 100%, 0.3); - border-left: 1px solid hsla(0, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); + border-top: 1px solid rgba(255, 255, 255, 0.3); + border-left: 1px solid rgba(255, 255, 255, 0.3); + border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 1rem 1rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0, 0%, 100%, 0.3); + border-right: 1px solid rgba(255, 255, 255, 0.3); } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 1rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 1rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 3rem; } @@ -1115,9 +1185,11 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44435; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 3rem; } @@ -1125,18 +1197,20 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 4rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 4rem; } + .p-inputswitch { width: 2.75rem; height: 1rem; } .p-inputswitch .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; } @@ -1158,7 +1232,7 @@ box-shadow: none; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); @@ -1169,9 +1243,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44435; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,7 +1255,7 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 1rem 1rem; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1204,72 +1280,87 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-float-label > label { left: 1rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f44435; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 1rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 3rem; } + .p-input-icon-left.p-float-label > label { left: 3rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 1rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 3rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.875rem 0.875rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-listbox .p-listbox-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1322,11 +1413,11 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-listbox.p-focus { outline: 0 none; @@ -1334,12 +1425,14 @@ box-shadow: none; border-color: #9FA8DA; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f44435; } + .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1362,7 +1455,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1376,9 +1469,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 2rem; } @@ -1386,6 +1481,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1395,7 +1491,7 @@ } .p-multiselect-panel .p-multiselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1453,11 +1549,11 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1474,21 +1570,25 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f44435; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f44435; } + .p-password-panel { padding: 1rem; background: #1e1e1e; @@ -1510,6 +1610,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 3rem; } @@ -1517,6 +1618,7 @@ color: rgba(255, 255, 255, 0.6); right: 1rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 5rem; } @@ -1524,12 +1626,13 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-radiobutton { width: 20px; height: 20px; } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; width: 20px; height: 20px; @@ -1561,14 +1664,16 @@ background: #121212; color: #9FA8DA; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44435; } + .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #121212; @@ -1576,9 +1681,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #121212; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1609,6 +1716,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f44435; } + .p-selectbutton .p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); @@ -1616,7 +1724,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1625,7 +1733,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1634,7 +1742,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight:hover { @@ -1643,14 +1751,16 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f44435; } + .p-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); border: 0 none; border-radius: 4px; } @@ -1700,6 +1810,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); @@ -1707,7 +1818,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1716,7 +1827,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1725,7 +1836,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight:hover { @@ -1734,15 +1845,17 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f44435; } + .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1765,7 +1878,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1776,12 +1889,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44435; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.5rem 1rem; } + .p-treeselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1791,7 +1907,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1841,15 +1957,17 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 2rem; } @@ -1857,6 +1975,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-button { color: #121212; background: #9FA8DA; @@ -1968,7 +2087,7 @@ padding: 0.714rem; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1995,426 +2114,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #F48FB1; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: rgba(244, 143, 177, 0.92); color: #121212; border-color: transparent; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: rgba(244, 143, 177, 0.68); color: #121212; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #F48FB1; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #F48FB1; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #F48FB1; border: 0 none; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #F48FB1; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #F48FB1; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #F48FB1; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #212121; background: #90caf9; border: 0 none; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: rgba(144, 202, 249, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: rgba(144, 202, 249, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(144, 202, 249, 0.04); color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(144, 202, 249, 0.16); color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #90caf9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(144, 202, 249, 0.04); border-color: transparent; color: #90caf9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(144, 202, 249, 0.16); border-color: transparent; color: #90caf9; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #212121; background: #c5e1a5; border: 0 none; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: rgba(197, 225, 165, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: rgba(197, 225, 165, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212121; background: #fff59d; border: 0 none; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: rgba(255, 245, 157, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: rgba(255, 245, 157, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 245, 157, 0.04); color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 245, 157, 0.16); color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fff59d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 245, 157, 0.04); border-color: transparent; color: #fff59d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 245, 157, 0.16); border-color: transparent; color: #fff59d; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #212121; background: #ce93d8; border: 0 none; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: rgba(206, 147, 216, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: rgba(206, 147, 216, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #212121; background: #ef9a9a; border: 0 none; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: rgba(239, 154, 154, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: rgba(239, 154, 154, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 154, 154, 0.04); color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 154, 154, 0.16); color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef9a9a; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 154, 154, 0.04); border-color: transparent; color: #ef9a9a; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 154, 154, 0.16); border-color: transparent; color: #ef9a9a; } + .p-button.p-button-link { color: #9FA8DA; background: transparent; @@ -2438,6 +2565,7 @@ color: #9FA8DA; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2449,14 +2577,17 @@ width: 2rem; height: 2rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: none; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2467,45 +2598,52 @@ background: rgba(244, 143, 177, 0.92); color: #212121; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.32); } + .p-splitbutton { border-radius: 4px; } @@ -2583,6 +2721,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #F48FB1; @@ -2611,6 +2750,7 @@ border-color: transparent; color: #F48FB1; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #90caf9; @@ -2639,6 +2779,7 @@ border-color: transparent; color: #90caf9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2667,6 +2808,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fff59d; @@ -2695,6 +2837,7 @@ border-color: transparent; color: #fff59d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2723,6 +2866,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ef9a9a; @@ -2751,8 +2895,9 @@ border-color: transparent; color: #ef9a9a; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -2763,13 +2908,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2795,6 +2940,7 @@ background: rgba(159, 168, 218, 0.16); color: #9FA8DA; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2888,9 +3034,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -2900,17 +3046,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2940,12 +3086,12 @@ background: #9FA8DA; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1e1e1e; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1e1e1e; } .p-datatable .p-datatable-loading-icon { @@ -3048,6 +3194,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3086,10 +3233,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2.5rem; height: 2.5rem; @@ -3117,6 +3266,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-clear-button { width: 2.5rem; height: 2.5rem; @@ -3136,6 +3286,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-overlay { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -3162,7 +3313,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3170,12 +3321,13 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3184,7 +3336,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3201,6 +3353,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3258,12 +3411,12 @@ transition: none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; @@ -3277,15 +3430,16 @@ color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list:not(.cdk-drop-list-dragging) .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 1rem 1rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3294,8 +3448,9 @@ background: #1e1e1e; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3332,6 +3487,7 @@ outline-offset: 0; box-shadow: none; } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3341,9 +3497,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3354,9 +3510,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); border-color: transparent; color: rgba(255, 255, 255, 0.6); @@ -3413,6 +3569,7 @@ border-color: transparent; color: rgba(255, 255, 255, 0.6); } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3470,12 +3627,12 @@ transition: none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; @@ -3489,15 +3646,16 @@ color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list:not(.cdk-drop-list-dragging) .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 1rem 1rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3506,6 +3664,7 @@ background: #1e1e1e; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3517,19 +3676,20 @@ background-color: #bdbdbd; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3586,19 +3746,19 @@ color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -3655,7 +3815,7 @@ color: inherit; } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content:focus { @@ -3663,6 +3823,7 @@ outline-offset: 0; box-shadow: none; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3802,7 +3963,7 @@ background: #9FA8DA; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1e1e1e; } .p-treetable .p-treetable-loading-icon { @@ -3863,6 +4024,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3887,6 +4049,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.5rem; border: 0 none; @@ -3959,6 +4122,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3984,6 +4148,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3992,7 +4157,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0, 0%, 100%, 0.12); + border-top: 1px rgba(255, 255, 255, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4002,11 +4167,12 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0, 0%, 100%, 0.12); + border-left: 1px rgba(255, 255, 255, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -4047,6 +4213,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid rgba(255, 255, 255, 0.12); padding: 1rem; @@ -4113,6 +4280,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; @@ -4123,6 +4291,7 @@ outline-offset: 0; box-shadow: none; } + .p-splitter { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -4131,10 +4300,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4142,8 +4311,9 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4212,6 +4382,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4222,6 +4393,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4269,6 +4441,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4341,6 +4514,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4382,6 +4556,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #262626; } + .p-sidebar { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4392,7 +4567,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2.5rem; height: 2.5rem; color: rgba(255, 255, 255, 0.6); @@ -4402,13 +4577,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -4422,6 +4597,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #444444; color: rgba(255, 255, 255, 0.87); @@ -4441,6 +4617,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #444444; } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 1rem; @@ -4480,6 +4657,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: rgba(159, 168, 218, 0.92); color: #121212; @@ -4490,6 +4668,7 @@ color: #121212; border-color: transparent; } + .p-breadcrumb { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4521,6 +4700,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.5rem 0; background: #2b2b2b; @@ -4568,7 +4748,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4576,13 +4756,13 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4593,11 +4773,11 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4607,6 +4787,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4630,31 +4811,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4713,7 +4895,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4721,13 +4903,13 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4738,7 +4920,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-megamenu .p-megamenu-panel { @@ -4761,7 +4943,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -4796,9 +4978,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } + .p-menu { padding: 0.5rem 0; background: #1e1e1e; @@ -4835,7 +5018,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4843,13 +5026,13 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4860,7 +5043,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menu.p-menu-overlay { @@ -4878,7 +5061,7 @@ border-top-left-radius: 0; } .p-menu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menu .p-menuitem-badge { @@ -4894,6 +5077,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 1rem; background: #1e1e1e; @@ -4932,7 +5116,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4963,7 +5147,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4971,13 +5155,13 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4988,7 +5172,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-submenu-list { @@ -4999,12 +5183,13 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5036,7 +5221,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5179,7 +5364,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5187,13 +5372,13 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5204,14 +5389,14 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -5244,6 +5429,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5286,7 +5472,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5294,13 +5480,13 @@ } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5311,7 +5497,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu.p-slidemenu-overlay { @@ -5326,7 +5512,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-slidemenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5358,6 +5544,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5394,7 +5581,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); width: 100%; top: 50%; left: 0; @@ -5402,6 +5589,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -5472,6 +5660,7 @@ outline-offset: 0; box-shadow: inset none; } + .p-tieredmenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5522,7 +5711,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5530,13 +5719,13 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5547,11 +5736,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -5561,6 +5750,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 1rem 1rem; margin: 0; @@ -5616,6 +5806,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5704,6 +5895,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5754,7 +5946,7 @@ color: #01579b; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { @@ -5764,7 +5956,7 @@ color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5774,7 +5966,7 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { @@ -5784,9 +5976,10 @@ color: #b71c1c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #b71c1c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5817,7 +6010,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5874,7 +6067,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -5884,7 +6077,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } @@ -5893,23 +6086,29 @@ outline-offset: 0; box-shadow: none; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5933,8 +6132,9 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: rgba(255, 255, 255, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -5953,9 +6153,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1e1e1e; } + .p-badge { background: #9FA8DA; color: #121212; @@ -5997,8 +6199,9 @@ height: 3rem; line-height: 3rem; } + .p-chip { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 1rem; @@ -6032,6 +6235,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -6046,6 +6250,7 @@ outline-offset: 0; box-shadow: none; } + .p-progressbar { border: 0 none; height: 4px; @@ -6061,6 +6266,7 @@ color: #121212; line-height: 4px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6082,6 +6288,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -6089,6 +6296,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #9FA8DA; color: #121212; @@ -6121,6 +6329,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -6172,15 +6381,17 @@ .p-accordion .p-accordion-tab .p-accordion-header.p-disabled .p-accordion-header-link > * { opacity: 0.38; } + .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-input-filled .p-autocomplete .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6190,13 +6401,13 @@ background-color: transparent; } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6204,9 +6415,11 @@ background-image: none; background: transparent; } + .p-float-label .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding-top: 0; padding-bottom: 0; @@ -6236,18 +6449,21 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-breadcrumb .p-menuitem-link { padding: 0.25rem 0.5rem; } .p-breadcrumb .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-button { font-weight: 500; min-width: 4rem; @@ -6299,98 +6515,105 @@ .p-button.p-button-raised:enabled:focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - .p-button.p-button-secondary:enabled:focus, .p-button-group.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + + .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(244, 143, 177, 0.76); } - .p-button.p-button-secondary:enabled:active, .p-button-group.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { background: rgba(244, 143, 177, 0.68); } - .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-button-group.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { background: rgba(244, 143, 177, 0.12); } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-button-group.p-button-secondary > .p-button.p-button-text:enabled:active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { background: rgba(244, 143, 177, 0.16); } - .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { + .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { background-color: rgba(244, 143, 177, 0.16); } - .p-button.p-button-info:enabled:focus, .p-button-group.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + + .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(144, 202, 249, 0.76); } - .p-button.p-button-info:enabled:active, .p-button-group.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { background: rgba(144, 202, 249, 0.68); } - .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-button-group.p-button-info > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { background: rgba(144, 202, 249, 0.12); } - .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-button-group.p-button-info > .p-button.p-button-text:enabled:active, .p-button-group.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { background: rgba(144, 202, 249, 0.16); } - .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { + .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { background-color: rgba(144, 202, 249, 0.16); } - .p-button.p-button-success:enabled:focus, .p-button-group.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + + .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(197, 225, 165, 0.76); } - .p-button.p-button-success:enabled:active, .p-button-group.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { background: rgba(197, 225, 165, 0.68); } - .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-button-group.p-button-success > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { background: rgba(197, 225, 165, 0.12); } - .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-button-group.p-button-success > .p-button.p-button-text:enabled:active, .p-button-group.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { background: rgba(197, 225, 165, 0.16); } - .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { + .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { background-color: rgba(197, 225, 165, 0.16); } - .p-button.p-button-warning:enabled:focus, .p-button-group.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + + .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(255, 245, 157, 0.76); } - .p-button.p-button-warning:enabled:active, .p-button-group.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { background: rgba(255, 245, 157, 0.68); } - .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-button-group.p-button-warning > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { background: rgba(255, 245, 157, 0.12); } - .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-button-group.p-button-warning > .p-button.p-button-text:enabled:active, .p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { background: rgba(255, 245, 157, 0.16); } - .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { + .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { background-color: rgba(255, 245, 157, 0.16); } - .p-button.p-button-help:enabled:focus, .p-button-group.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + + .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(206, 147, 216, 0.76); } - .p-button.p-button-help:enabled:active, .p-button-group.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { background: rgba(206, 147, 216, 0.68); } - .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-button-group.p-button-help > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { background: rgba(206, 147, 216, 0.12); } - .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-button-group.p-button-help > .p-button.p-button-text:enabled:active, .p-button-group.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { background: rgba(206, 147, 216, 0.16); } - .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { + .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { background-color: rgba(206, 147, 216, 0.16); } - .p-button.p-button-danger:enabled:focus, .p-button-group.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + + .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(239, 154, 154, 0.76); } - .p-button.p-button-danger:enabled:active, .p-button-group.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { background: rgba(239, 154, 154, 0.68); } - .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-button-group.p-button-danger > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { background: rgba(239, 154, 154, 0.12); } - .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-button-group.p-button-danger > .p-button.p-button-text:enabled:active, .p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { background: rgba(239, 154, 154, 0.16); } - .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { + .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } + .p-calendar-w-btn { - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6435,6 +6658,7 @@ .p-calendar-w-btn.p-calendar-disabled .p-inputtext { opacity: 1; } + .p-datepicker .p-datepicker-header { border-bottom: 0 none; } @@ -6449,7 +6673,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6460,6 +6684,7 @@ .p-datepicker table td.p-datepicker-today.p-highlight { box-shadow: 0 0 0 1px rgba(159, 168, 218, 0.16); } + p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } @@ -6472,12 +6697,13 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled .p-calendar-w-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6487,13 +6713,13 @@ background-color: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6527,6 +6753,7 @@ border: 0 none; background-image: none; } + .p-cascadeselect .p-inputtext, .p-cascadeselect .p-cascadeselect-trigger { background-image: none; background: transparent; @@ -6537,15 +6764,17 @@ .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-cascadeselect-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } + .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6555,13 +6784,13 @@ background-color: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6587,6 +6816,7 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + .p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -6606,27 +6836,30 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #F48FB1; color: #121212; } + .p-checkbox { border-radius: 50%; transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -6654,12 +6887,14 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #1e1e1e; } .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { background-color: #1e1e1e; } + @keyframes checkbox-check { 0% { width: 0; @@ -6682,12 +6917,13 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6697,13 +6933,13 @@ background-color: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6711,9 +6947,11 @@ background-image: none; background: transparent; } + .p-float-label .p-chips-multiple-container .p-chips-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-token { padding-top: 0; padding-bottom: 0; @@ -6735,9 +6973,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-datatable .p-sortable-column { outline: 0 none; } @@ -6750,12 +6990,14 @@ .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus { background-color: rgba(255, 255, 255, 0.03); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #9FA8DA; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #9FA8DA; } + .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; @@ -6766,15 +7008,17 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-dropdown-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } + .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6784,13 +7028,13 @@ background-color: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6812,9 +7056,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-galleria .p-galleria-indicators { padding: 1rem; } @@ -6826,30 +7072,32 @@ background: rgba(244, 143, 177, 0.68); color: #121212; } + .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } .p-inputtext:enabled:focus.ng-invalid.ng-dirty { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled .p-inputtext { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6861,12 +7109,13 @@ box-shadow: none; border-color: transparent; } + .p-input-filled .p-inputgroup .p-inputgroup-addon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6875,24 +7124,26 @@ border-right-color: transparent; } .p-input-filled .p-inputgroup-addon:first-child, - .p-input-filled .p-inputgroup button:first-child, - .p-input-filled .p-inputgroup input:first-child { +.p-input-filled .p-inputgroup button:first-child, +.p-input-filled .p-inputgroup input:first-child { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:first-child input { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup-addon:last-child, - .p-input-filled .p-inputgroup button:last-child, - .p-input-filled .p-inputgroup input:last-child { +.p-input-filled .p-inputgroup button:last-child, +.p-input-filled .p-inputgroup input:last-child { border-bottom-right-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:last-child input { border-bottom-right-radius: 0; } + p-inputmask.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled p-inputmask.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); @@ -6901,9 +7152,11 @@ box-shadow: none; border-color: transparent; } + p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled p-inputnumber.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); @@ -6912,6 +7165,7 @@ box-shadow: none; border-color: transparent; } + .p-inputswitch .p-inputswitch-slider:before { transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); @@ -6928,45 +7182,51 @@ .p-inputswitch.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } + .p-fieldset .p-fieldset-legend { border: 0 none; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { background: rgba(255, 255, 255, 0.12); } + .p-float-label input:focus ~ label, - .p-float-label input.p-filled ~ label, - .p-float-label textarea:focus ~ label, - .p-float-label textarea.p-filled ~ label, - .p-float-label .p-inputwrapper-focus ~ label, - .p-float-label .p-inputwrapper-filled ~ label { +.p-float-label input.p-filled ~ label, +.p-float-label textarea:focus ~ label, +.p-float-label textarea.p-filled ~ label, +.p-float-label .p-inputwrapper-focus ~ label, +.p-float-label .p-inputwrapper-filled ~ label { top: -0.5rem !important; background-color: #1e1e1e; padding: 2px 4px; margin-left: -4px; margin-top: 0; } + .p-float-label textarea ~ label { margin-top: 0; } + .p-float-label input:focus ~ label, - .p-float-label .p-inputwrapper-focus ~ label { +.p-float-label .p-inputwrapper-focus ~ label { color: #9FA8DA; } + .p-input-filled .p-float-label .p-inputtext { padding-top: 1.5rem; padding-bottom: 0.5rem; } .p-input-filled .p-float-label input:focus ~ label, - .p-input-filled .p-float-label input.p-filled ~ label, - .p-input-filled .p-float-label textarea:focus ~ label, - .p-input-filled .p-float-label textarea.p-filled ~ label, - .p-input-filled .p-float-label .p-inputwrapper-focus ~ label, - .p-input-filled .p-float-label .p-inputwrapper-filled ~ label { +.p-input-filled .p-float-label input.p-filled ~ label, +.p-input-filled .p-float-label textarea:focus ~ label, +.p-input-filled .p-float-label textarea.p-filled ~ label, +.p-input-filled .p-float-label .p-inputwrapper-focus ~ label, +.p-input-filled .p-float-label .p-inputwrapper-filled ~ label { top: 0.25rem !important; margin-top: 0; background: transparent; } + .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } @@ -6976,21 +7236,25 @@ .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-menu .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -7001,6 +7265,7 @@ .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } @@ -7013,12 +7278,13 @@ .p-multiselect-panel .p-multiselect-close:focus { background: rgba(255, 255, 255, 0.12); } + .p-input-filled .p-multiselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7028,13 +7294,13 @@ background-color: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7046,11 +7312,13 @@ background-image: none; background: transparent; } + .p-float-label .p-multiselect-label .p-multiselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-multiselect .p-multiselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -7079,18 +7347,22 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-orderlist .p-orderlist-list .p-orderlist-item:focus { background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } + .p-paginator { justify-content: flex-end; } @@ -7100,13 +7372,14 @@ .p-paginator .p-paginator-element:focus.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-panel { border-radius: 4px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); } .p-panel .p-panel-header, - .p-panel .p-panel-content, - .p-panel .p-panel-footer { +.p-panel .p-panel-content, +.p-panel .p-panel-footer { border: 0 none; } .p-panel .p-panel-content { @@ -7118,6 +7391,7 @@ .p-panel .p-panel-header-icon:focus { background: rgba(255, 255, 255, 0.12); } + .p-panelmenu .p-panelmenu-panel { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; @@ -7153,27 +7427,30 @@ .p-panelmenu .p-panelmenu-panel .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item:focus { background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-progressbar { border-radius: 0; } .p-progressbar .p-progressbar-label { display: none !important; } + .p-radiobutton { border-radius: 50%; transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -7190,12 +7467,14 @@ .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #1e1e1e; } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #1e1e1e; } + .p-rating { gap: 0; } @@ -7217,6 +7496,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item { background: rgba(244, 68, 53, 0.04); } + .p-selectbutton .p-button:focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); @@ -7225,12 +7505,14 @@ background: #262626; border-color: rgba(255, 255, 255, 0.12); } + .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-slider .p-slider-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); @@ -7241,6 +7523,7 @@ .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } + .p-steps { padding: 1rem 0; } @@ -7293,6 +7576,7 @@ .p-steps .p-steps-item.p-disabled { opacity: 1; } + .p-tabview .p-tabview-nav { position: relative; } @@ -7315,9 +7599,11 @@ background-color: #9FA8DA; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-toolbar { border: 0 none; } + .p-tooltip .p-tooltip-text { box-shadow: none; font-size: 0.875rem; @@ -7325,12 +7611,14 @@ .p-tooltip .p-tooltip-arrow { display: none; } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; @@ -7341,15 +7629,17 @@ .p-treeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-treeselect-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } + .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7359,13 +7649,13 @@ background-color: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7377,11 +7667,13 @@ background-image: none; background: transparent; } + .p-float-label .p-treeselect-label .p-treeselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-treeselect .p-treeselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -7410,9 +7702,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + .p-treeselect.p-invalid:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-tree .p-tree-container .p-treenode { outline: 0 none; } @@ -7422,6 +7716,7 @@ .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-treetable .p-sortable-column { outline: 0 none; } @@ -7434,6 +7729,7 @@ .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus { background-color: rgba(255, 255, 255, 0.03); } + .p-tabmenu .p-tabmenu-nav { position: relative; } @@ -7458,12 +7754,14 @@ background-color: #9FA8DA; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { margin: 0.5rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { margin: 0 0.5rem; } + .p-togglebutton.p-button:focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); @@ -7472,6 +7770,7 @@ background: #262626; border-color: rgba(255, 255, 255, 0.12); } + .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(159, 168, 218, 0.12); } @@ -7503,45 +7802,53 @@ .p-splitbutton.p-button-raised > .p-button:not(:disabled):focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(244, 143, 177, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { background: rgba(244, 143, 177, 0.16); } + .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(144, 202, 249, 0.12); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active { background: rgba(144, 202, 249, 0.16); } + .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(197, 225, 165, 0.12); } .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active { background: rgba(197, 225, 165, 0.16); } + .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(255, 245, 157, 0.12); } .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active { background: rgba(255, 245, 157, 0.16); } + .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(206, 147, 216, 0.12); } .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active { background: rgba(206, 147, 216, 0.16); } + .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(239, 154, 154, 0.12); } .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(239, 154, 154, 0.16); } + .p-scrollpanel .p-scrollpanel-bar:focus { box-shadow: 0 0 1px 4px rgba(244, 143, 177, 0.2); } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css index 156668ea147..78b119e9cd3 100644 --- a/src/assets/components/themes/md-light-deeppurple/theme.css +++ b/src/assets/components/themes/md-light-deeppurple/theme.css @@ -54,21 +54,24 @@ font-family: "Roboto"; font-style: normal; font-weight: 400; - src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; - src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; - src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f4fafe; @@ -296,32 +299,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.32); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.38; } + .p-error { color: #b00020; } + .p-text-secondary { color: rgba(0, 0, 0, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -333,12 +344,15 @@ outline-offset: 0; 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; @@ -355,6 +369,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 1rem; } @@ -401,6 +416,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .p-autocomplete-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -447,9 +463,11 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #b00020; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 3rem; } @@ -457,19 +475,23 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(0, 0, 0, 0.6); right: 4rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #b00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #673AB7; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -496,7 +518,7 @@ border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -506,13 +528,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -521,14 +543,14 @@ line-height: 2.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 500; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #673AB7; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -567,7 +589,7 @@ .p-datepicker table td.p-datepicker-today > span { background: #ffffff; color: rgba(0, 0, 0, 0.87); - border-color: rgb(0, 0, 0); + border-color: black; } .p-datepicker table td.p-datepicker-today > span.p-highlight { color: #673AB7; @@ -677,6 +699,7 @@ outline-offset: 0; box-shadow: none; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 3rem; } @@ -684,10 +707,12 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(0, 0, 0, 0.6); right: 4rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -730,6 +755,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #b00020; } + .p-cascadeselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -769,6 +795,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f5f5f5; } @@ -778,9 +805,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #b00020; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 1rem; } @@ -788,6 +817,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -796,6 +826,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 18px; height: 18px; @@ -836,9 +867,11 @@ background: #673AB7; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } @@ -851,12 +884,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #673AB7; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(0, 0, 0, 0.87); } @@ -895,9 +931,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #b00020; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 2rem; } @@ -905,22 +943,26 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -964,6 +1006,7 @@ .p-dropdown.p-invalid.p-component { border-color: #b00020; } + .p-dropdown-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1027,6 +1070,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #f5f5f5; } @@ -1039,9 +1083,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #b00020; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1054,60 +1106,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid rgba(0, 0, 0, 0.38); } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 1rem; + color: rgba(0, 0, 0, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 1rem; + color: rgba(0, 0, 0, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #b00020; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 3rem; } @@ -1115,9 +1185,11 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #b00020; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 3rem; } @@ -1125,12 +1197,14 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 4rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 4rem; } + .p-inputswitch { width: 2.75rem; height: 1rem; @@ -1169,9 +1243,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(103, 58, 183, 0.5); } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #b00020; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1204,45 +1280,57 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-float-label > label { left: 1rem; color: rgba(0, 0, 0, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #b00020; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 1rem; color: rgba(0, 0, 0, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 3rem; } + .p-input-icon-left.p-float-label > label { left: 3rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 1rem; color: rgba(0, 0, 0, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 3rem; } + ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.6); } + :-moz-placeholder { color: rgba(0, 0, 0, 0.6); } + ::-moz-placeholder { color: rgba(0, 0, 0, 0.6); } + :-ms-input-placeholder { color: rgba(0, 0, 0, 0.6); } + .p-input-filled .p-inputtext { background-color: #f5f5f5; } @@ -1252,14 +1340,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #dcdcdc; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.875rem 0.875rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1334,9 +1425,11 @@ box-shadow: none; border-color: #673AB7; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #b00020; } + .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1376,9 +1469,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 2rem; } @@ -1386,6 +1481,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1474,6 +1570,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #f5f5f5; } @@ -1483,12 +1580,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #b00020; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #b00020; } + .p-password-panel { padding: 1rem; background: #ffffff; @@ -1510,6 +1610,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } + p-password.p-password-clearable .p-password-input { padding-right: 3rem; } @@ -1517,6 +1618,7 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 5rem; } @@ -1524,6 +1626,7 @@ color: rgba(0, 0, 0, 0.6); right: 3rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1561,9 +1664,11 @@ background: #ffffff; color: #673AB7; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #b00020; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f5f5f5; } @@ -1576,9 +1681,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1609,6 +1716,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b00020; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); @@ -1616,7 +1724,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1625,7 +1733,7 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1634,7 +1742,7 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button.p-highlight:hover { @@ -1643,12 +1751,14 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #b00020; } + .p-slider { background: #c1c1c1; border: 0 none; @@ -1700,6 +1810,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); @@ -1707,7 +1818,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1716,7 +1827,7 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1725,7 +1836,7 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button.p-highlight:hover { @@ -1734,12 +1845,14 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #b00020; } + .p-treeselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1776,12 +1889,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #b00020; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.5rem 1rem; } + .p-treeselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1841,6 +1957,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #f5f5f5; } @@ -1850,6 +1967,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 2rem; } @@ -1857,6 +1975,7 @@ color: rgba(0, 0, 0, 0.6); right: 3rem; } + .p-button { color: #ffffff; background: #673AB7; @@ -1968,7 +2087,7 @@ padding: 0.714rem; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1995,426 +2114,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #4CAF50; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: rgba(76, 175, 80, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: rgba(76, 175, 80, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(76, 175, 80, 0.04); color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(76, 175, 80, 0.16); color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #4CAF50; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(76, 175, 80, 0.04); border-color: transparent; color: #4CAF50; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(76, 175, 80, 0.16); border-color: transparent; color: #4CAF50; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #2196f3; border: 0 none; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: rgba(33, 150, 243, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: rgba(33, 150, 243, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(33, 150, 243, 0.04); color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(33, 150, 243, 0.16); color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #2196f3; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(33, 150, 243, 0.04); border-color: transparent; color: #2196f3; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(33, 150, 243, 0.16); border-color: transparent; color: #2196f3; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689f38; border: 0 none; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: rgba(104, 159, 56, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: rgba(104, 159, 56, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(104, 159, 56, 0.16); color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #689f38; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689f38; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689f38; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #fbc02d; border: 0 none; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: rgba(251, 192, 45, 0.92); color: #212529; border-color: transparent; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: rgba(251, 192, 45, 0.68); color: #212529; border-color: transparent; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 192, 45, 0.16); color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fbc02d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #fbc02d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #fbc02d; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 0 none; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: rgba(156, 39, 176, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: rgba(156, 39, 176, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d32f2f; border: 0 none; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: rgba(211, 47, 47, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: rgba(211, 47, 47, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(211, 47, 47, 0.16); color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d32f2f; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #d32f2f; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #d32f2f; } + .p-button.p-button-link { color: #673AB7; background: transparent; @@ -2438,6 +2565,7 @@ color: #673AB7; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2449,14 +2577,17 @@ width: 2rem; height: 2rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: none; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2467,45 +2598,52 @@ background: rgba(76, 175, 80, 0.92); color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.32); } + .p-splitbutton { border-radius: 4px; } @@ -2583,6 +2721,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #4CAF50; @@ -2611,6 +2750,7 @@ border-color: transparent; color: #4CAF50; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #2196f3; @@ -2639,6 +2779,7 @@ border-color: transparent; color: #2196f3; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #689f38; @@ -2667,6 +2808,7 @@ border-color: transparent; color: #689f38; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fbc02d; @@ -2695,6 +2837,7 @@ border-color: transparent; color: #fbc02d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2723,6 +2866,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d32f2f; @@ -2751,8 +2895,9 @@ border-color: transparent; color: #d32f2f; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -2763,13 +2908,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2795,6 +2940,7 @@ background: rgba(103, 58, 183, 0.12); color: #673AB7; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2888,9 +3034,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -2900,17 +3046,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2940,12 +3086,12 @@ background: #673AB7; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #ffffff; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #ffffff; } .p-datatable .p-datatable-loading-icon { @@ -3048,6 +3194,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3086,10 +3233,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2.5rem; height: 2.5rem; @@ -3117,6 +3266,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-clear-button { width: 2.5rem; height: 2.5rem; @@ -3136,6 +3286,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-overlay { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3173,6 +3324,7 @@ border-top: 1px solid rgba(0, 0, 0, 0.12); margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12); @@ -3201,6 +3353,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3286,6 +3439,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(0, 0, 0, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 1rem 1rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3294,6 +3448,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); @@ -3332,6 +3487,7 @@ outline-offset: 0; box-shadow: none; } + .p-paginator { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3341,9 +3497,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(0, 0, 0, 0.6); @@ -3354,9 +3510,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); border-color: transparent; color: rgba(0, 0, 0, 0.6); @@ -3413,6 +3569,7 @@ border-color: transparent; color: rgba(0, 0, 0, 0.6); } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3498,6 +3655,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(0, 0, 0, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 1rem 1rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3506,6 +3664,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3517,19 +3676,20 @@ background-color: #bdbdbd; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e0e0e0; background: #ffffff; @@ -3586,11 +3746,11 @@ color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3663,6 +3823,7 @@ outline-offset: 0; box-shadow: none; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3802,7 +3963,7 @@ background: #673AB7; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #ffffff; } .p-treetable .p-treetable-loading-icon { @@ -3863,6 +4024,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3887,6 +4049,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.5rem; border: 0 none; @@ -3959,6 +4122,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3984,6 +4148,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -4007,6 +4172,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e0e0e0; background: #ffffff; @@ -4047,6 +4213,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #e0e0e0; padding: 1rem; @@ -4113,6 +4280,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; @@ -4123,6 +4291,7 @@ outline-offset: 0; box-shadow: none; } + .p-splitter { border: 1px solid #e0e0e0; background: #ffffff; @@ -4144,6 +4313,7 @@ .p-splitter .p-splitter-gutter-resizing { background: rgba(0, 0, 0, 0.12); } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4212,6 +4382,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #ffffff; border: 1px solid #e0e0e0; @@ -4222,6 +4393,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4269,6 +4441,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4341,6 +4514,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4382,6 +4556,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4392,7 +4567,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -4402,13 +4577,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -4422,6 +4597,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); color: #ffffff; @@ -4441,6 +4617,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: rgba(97, 97, 97, 0.9); } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1rem; @@ -4480,6 +4657,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: rgba(103, 58, 183, 0.92); color: #ffffff; @@ -4490,6 +4668,7 @@ color: #ffffff; border-color: transparent; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e5e5; @@ -4521,6 +4700,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(0, 0, 0, 0.6); } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4568,7 +4748,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4582,7 +4762,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4593,7 +4773,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-contextmenu .p-menuitem-separator { @@ -4607,6 +4787,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4630,31 +4811,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4713,7 +4895,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4727,7 +4909,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4738,7 +4920,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-megamenu .p-megamenu-panel { @@ -4796,9 +4978,10 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4835,7 +5018,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4849,7 +5032,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4860,7 +5043,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menu.p-menu-overlay { @@ -4894,6 +5077,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 1rem; background: transparent; @@ -4932,7 +5116,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4963,7 +5147,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4977,7 +5161,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4988,7 +5172,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-submenu-list { @@ -5005,6 +5189,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5179,7 +5364,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5193,7 +5378,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5204,7 +5389,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5244,6 +5429,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5286,7 +5472,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5300,7 +5486,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5311,7 +5497,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-slidemenu.p-slidemenu-overlay { @@ -5358,6 +5544,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5402,6 +5589,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -5472,6 +5660,7 @@ outline-offset: 0; box-shadow: inset none; } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5522,7 +5711,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5536,7 +5725,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5547,7 +5736,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-tieredmenu .p-menuitem-separator { @@ -5561,6 +5750,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 1rem 1rem; margin: 0; @@ -5616,6 +5806,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5704,6 +5895,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5754,7 +5946,7 @@ color: #01579b; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { @@ -5764,7 +5956,7 @@ color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5774,7 +5966,7 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { @@ -5784,9 +5976,10 @@ color: #b71c1c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #b71c1c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5817,7 +6010,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5874,7 +6067,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -5884,7 +6077,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } @@ -5893,23 +6086,29 @@ outline-offset: 0; box-shadow: none; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5933,6 +6132,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: rgba(0, 0, 0, 0.12); border-radius: 4px; @@ -5953,9 +6153,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #673AB7; color: #ffffff; @@ -5997,6 +6199,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); @@ -6032,6 +6235,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -6046,6 +6250,7 @@ outline-offset: 0; box-shadow: none; } + .p-progressbar { border: 0 none; height: 4px; @@ -6061,6 +6266,7 @@ color: #ffffff; line-height: 4px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6082,6 +6288,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(0, 0, 0, 0.08); border-radius: 4px; @@ -6089,6 +6296,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #673AB7; color: #ffffff; @@ -6121,6 +6329,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -6172,9 +6381,11 @@ .p-accordion .p-accordion-tab .p-accordion-header.p-disabled .p-accordion-header-link > * { opacity: 0.38; } + .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-input-filled .p-autocomplete .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6204,9 +6415,11 @@ background-image: none; background: transparent; } + .p-float-label .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding-top: 0; padding-bottom: 0; @@ -6236,18 +6449,21 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-breadcrumb .p-menuitem-link { padding: 0.25rem 0.5rem; } .p-breadcrumb .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-button { font-weight: 500; min-width: 4rem; @@ -6299,96 +6515,103 @@ .p-button.p-button-raised:enabled:focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - .p-button.p-button-secondary:enabled:focus, .p-button-group.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + + .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(76, 175, 80, 0.76); } - .p-button.p-button-secondary:enabled:active, .p-button-group.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { background: rgba(76, 175, 80, 0.68); } - .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-button-group.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { background: rgba(76, 175, 80, 0.12); } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-button-group.p-button-secondary > .p-button.p-button-text:enabled:active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { background: rgba(76, 175, 80, 0.16); } - .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { + .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { background-color: rgba(76, 175, 80, 0.16); } - .p-button.p-button-info:enabled:focus, .p-button-group.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + + .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(33, 150, 243, 0.76); } - .p-button.p-button-info:enabled:active, .p-button-group.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { background: rgba(33, 150, 243, 0.68); } - .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-button-group.p-button-info > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { background: rgba(33, 150, 243, 0.12); } - .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-button-group.p-button-info > .p-button.p-button-text:enabled:active, .p-button-group.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { background: rgba(33, 150, 243, 0.16); } - .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { + .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { background-color: rgba(33, 150, 243, 0.16); } - .p-button.p-button-success:enabled:focus, .p-button-group.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + + .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(104, 159, 56, 0.76); } - .p-button.p-button-success:enabled:active, .p-button-group.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { background: rgba(104, 159, 56, 0.68); } - .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-button-group.p-button-success > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { background: rgba(104, 159, 56, 0.12); } - .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-button-group.p-button-success > .p-button.p-button-text:enabled:active, .p-button-group.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { background: rgba(104, 159, 56, 0.16); } - .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { + .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { background-color: rgba(104, 159, 56, 0.16); } - .p-button.p-button-warning:enabled:focus, .p-button-group.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + + .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(251, 192, 45, 0.76); } - .p-button.p-button-warning:enabled:active, .p-button-group.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { background: rgba(251, 192, 45, 0.68); } - .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-button-group.p-button-warning > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { background: rgba(251, 192, 45, 0.12); } - .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-button-group.p-button-warning > .p-button.p-button-text:enabled:active, .p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { background: rgba(251, 192, 45, 0.16); } - .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { + .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { background-color: rgba(251, 192, 45, 0.16); } - .p-button.p-button-help:enabled:focus, .p-button-group.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + + .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(156, 39, 176, 0.76); } - .p-button.p-button-help:enabled:active, .p-button-group.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { background: rgba(156, 39, 176, 0.68); } - .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-button-group.p-button-help > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { background: rgba(156, 39, 176, 0.12); } - .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-button-group.p-button-help > .p-button.p-button-text:enabled:active, .p-button-group.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { background: rgba(156, 39, 176, 0.16); } - .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { + .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { background-color: rgba(156, 39, 176, 0.16); } - .p-button.p-button-danger:enabled:focus, .p-button-group.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + + .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(211, 47, 47, 0.76); } - .p-button.p-button-danger:enabled:active, .p-button-group.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { background: rgba(211, 47, 47, 0.68); } - .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-button-group.p-button-danger > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { background: rgba(211, 47, 47, 0.12); } - .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-button-group.p-button-danger > .p-button.p-button-text:enabled:active, .p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { background: rgba(211, 47, 47, 0.16); } - .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { + .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } + .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; @@ -6435,6 +6658,7 @@ .p-calendar-w-btn.p-calendar-disabled .p-inputtext { opacity: 1; } + .p-datepicker .p-datepicker-header { border-bottom: 0 none; } @@ -6460,6 +6684,7 @@ .p-datepicker table td.p-datepicker-today.p-highlight { box-shadow: 0 0 0 1px rgba(103, 58, 183, 0.12); } + p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } @@ -6472,6 +6697,7 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled .p-calendar-w-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6527,6 +6753,7 @@ border: 0 none; background-image: none; } + .p-cascadeselect .p-inputtext, .p-cascadeselect .p-cascadeselect-trigger { background-image: none; background: transparent; @@ -6537,9 +6764,11 @@ .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-cascadeselect-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } + .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6587,6 +6816,7 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + .p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -6606,13 +6836,16 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #4CAF50; color: #ffffff; } + .p-checkbox { border-radius: 50%; transition: box-shadow 0.2s; @@ -6654,12 +6887,14 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12); } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #ffffff; } .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { background-color: #ffffff; } + @keyframes checkbox-check { 0% { width: 0; @@ -6682,6 +6917,7 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6711,9 +6947,11 @@ background-image: none; background: transparent; } + .p-float-label .p-chips-multiple-container .p-chips-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-token { padding-top: 0; padding-bottom: 0; @@ -6735,9 +6973,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-datatable .p-sortable-column { outline: 0 none; } @@ -6750,12 +6990,14 @@ .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus { background-color: rgba(0, 0, 0, 0.03); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #673AB7; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #673AB7; } + .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; @@ -6766,9 +7008,11 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-dropdown-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } + .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6812,9 +7056,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-galleria .p-galleria-indicators { padding: 1rem; } @@ -6826,12 +7072,14 @@ background: rgba(76, 175, 80, 0.68); color: #ffffff; } + .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-inputtext:enabled:focus.ng-invalid.ng-dirty { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled .p-inputtext { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6861,6 +7109,7 @@ box-shadow: none; border-color: transparent; } + .p-input-filled .p-inputgroup .p-inputgroup-addon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6875,24 +7124,26 @@ border-right-color: transparent; } .p-input-filled .p-inputgroup-addon:first-child, - .p-input-filled .p-inputgroup button:first-child, - .p-input-filled .p-inputgroup input:first-child { +.p-input-filled .p-inputgroup button:first-child, +.p-input-filled .p-inputgroup input:first-child { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:first-child input { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup-addon:last-child, - .p-input-filled .p-inputgroup button:last-child, - .p-input-filled .p-inputgroup input:last-child { +.p-input-filled .p-inputgroup button:last-child, +.p-input-filled .p-inputgroup input:last-child { border-bottom-right-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:last-child input { border-bottom-right-radius: 0; } + p-inputmask.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled p-inputmask.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); @@ -6901,9 +7152,11 @@ box-shadow: none; border-color: transparent; } + p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled p-inputnumber.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); @@ -6912,6 +7165,7 @@ box-shadow: none; border-color: transparent; } + .p-inputswitch .p-inputswitch-slider:before { transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); @@ -6928,45 +7182,51 @@ .p-inputswitch.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-fieldset .p-fieldset-legend { border: 0 none; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { background: rgba(0, 0, 0, 0.12); } + .p-float-label input:focus ~ label, - .p-float-label input.p-filled ~ label, - .p-float-label textarea:focus ~ label, - .p-float-label textarea.p-filled ~ label, - .p-float-label .p-inputwrapper-focus ~ label, - .p-float-label .p-inputwrapper-filled ~ label { +.p-float-label input.p-filled ~ label, +.p-float-label textarea:focus ~ label, +.p-float-label textarea.p-filled ~ label, +.p-float-label .p-inputwrapper-focus ~ label, +.p-float-label .p-inputwrapper-filled ~ label { top: -0.5rem !important; background-color: #ffffff; padding: 2px 4px; margin-left: -4px; margin-top: 0; } + .p-float-label textarea ~ label { margin-top: 0; } + .p-float-label input:focus ~ label, - .p-float-label .p-inputwrapper-focus ~ label { +.p-float-label .p-inputwrapper-focus ~ label { color: #673AB7; } + .p-input-filled .p-float-label .p-inputtext { padding-top: 1.5rem; padding-bottom: 0.5rem; } .p-input-filled .p-float-label input:focus ~ label, - .p-input-filled .p-float-label input.p-filled ~ label, - .p-input-filled .p-float-label textarea:focus ~ label, - .p-input-filled .p-float-label textarea.p-filled ~ label, - .p-input-filled .p-float-label .p-inputwrapper-focus ~ label, - .p-input-filled .p-float-label .p-inputwrapper-filled ~ label { +.p-input-filled .p-float-label input.p-filled ~ label, +.p-input-filled .p-float-label textarea:focus ~ label, +.p-input-filled .p-float-label textarea.p-filled ~ label, +.p-input-filled .p-float-label .p-inputwrapper-focus ~ label, +.p-input-filled .p-float-label .p-inputwrapper-filled ~ label { top: 0.25rem !important; margin-top: 0; background: transparent; } + .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } @@ -6976,21 +7236,25 @@ .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-menu .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -7001,6 +7265,7 @@ .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } @@ -7013,6 +7278,7 @@ .p-multiselect-panel .p-multiselect-close:focus { background: rgba(0, 0, 0, 0.12); } + .p-input-filled .p-multiselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -7046,11 +7312,13 @@ background-image: none; background: transparent; } + .p-float-label .p-multiselect-label .p-multiselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-multiselect .p-multiselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -7079,18 +7347,22 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-orderlist .p-orderlist-list .p-orderlist-item:focus { background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } + .p-paginator { justify-content: flex-end; } @@ -7100,13 +7372,14 @@ .p-paginator .p-paginator-element:focus.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-panel { border-radius: 4px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); } .p-panel .p-panel-header, - .p-panel .p-panel-content, - .p-panel .p-panel-footer { +.p-panel .p-panel-content, +.p-panel .p-panel-footer { border: 0 none; } .p-panel .p-panel-content { @@ -7118,6 +7391,7 @@ .p-panel .p-panel-header-icon:focus { background: rgba(0, 0, 0, 0.12); } + .p-panelmenu .p-panelmenu-panel { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; @@ -7153,18 +7427,21 @@ .p-panelmenu .p-panelmenu-panel .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item:focus { background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-progressbar { border-radius: 0; } .p-progressbar .p-progressbar-label { display: none !important; } + .p-radiobutton { border-radius: 50%; transition: box-shadow 0.2s; @@ -7190,12 +7467,14 @@ .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12); } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #ffffff; } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #ffffff; } + .p-rating { gap: 0; } @@ -7217,6 +7496,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item { background: rgba(176, 0, 32, 0.04); } + .p-selectbutton .p-button:focus { background: #e0e0e1; border-color: #e0e0e1; @@ -7225,12 +7505,14 @@ background: #d9d8d9; border-color: #d9d8d9; } + .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-slider .p-slider-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); @@ -7241,6 +7523,7 @@ .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } + .p-steps { padding: 1rem 0; } @@ -7293,6 +7576,7 @@ .p-steps .p-steps-item.p-disabled { opacity: 1; } + .p-tabview .p-tabview-nav { position: relative; } @@ -7315,9 +7599,11 @@ background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-toolbar { border: 0 none; } + .p-tooltip .p-tooltip-text { box-shadow: none; font-size: 0.875rem; @@ -7325,12 +7611,14 @@ .p-tooltip .p-tooltip-arrow { display: none; } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; @@ -7341,9 +7629,11 @@ .p-treeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-treeselect-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } + .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -7377,11 +7667,13 @@ background-image: none; background: transparent; } + .p-float-label .p-treeselect-label .p-treeselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-treeselect .p-treeselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -7410,9 +7702,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + .p-treeselect.p-invalid:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-tree .p-tree-container .p-treenode { outline: 0 none; } @@ -7422,6 +7716,7 @@ .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-treetable .p-sortable-column { outline: 0 none; } @@ -7434,6 +7729,7 @@ .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus { background-color: rgba(0, 0, 0, 0.03); } + .p-tabmenu .p-tabmenu-nav { position: relative; } @@ -7458,12 +7754,14 @@ background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { margin: 0.5rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { margin: 0 0.5rem; } + .p-togglebutton.p-button:focus { background: #e0e0e1; border-color: #e0e0e1; @@ -7472,6 +7770,7 @@ background: #d9d8d9; border-color: #d9d8d9; } + .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(103, 58, 183, 0.12); } @@ -7503,45 +7802,53 @@ .p-splitbutton.p-button-raised > .p-button:not(:disabled):focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(76, 175, 80, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { background: rgba(76, 175, 80, 0.16); } + .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(33, 150, 243, 0.12); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active { background: rgba(33, 150, 243, 0.16); } + .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(104, 159, 56, 0.12); } .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active { background: rgba(104, 159, 56, 0.16); } + .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(251, 192, 45, 0.12); } .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active { background: rgba(251, 192, 45, 0.16); } + .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(156, 39, 176, 0.12); } .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active { background: rgba(156, 39, 176, 0.16); } + .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(211, 47, 47, 0.12); } .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(211, 47, 47, 0.16); } + .p-scrollpanel .p-scrollpanel-bar:focus { box-shadow: 0 0 1px 4px rgba(76, 175, 80, 0.2); } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css index 0e82f57d6fd..1e728dff8e5 100644 --- a/src/assets/components/themes/md-light-indigo/theme.css +++ b/src/assets/components/themes/md-light-indigo/theme.css @@ -54,21 +54,24 @@ font-family: "Roboto"; font-style: normal; font-weight: 400; - src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; - src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; - src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f4fafe; @@ -296,32 +299,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.32); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.38; } + .p-error { color: #b00020; } + .p-text-secondary { color: rgba(0, 0, 0, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -333,12 +344,15 @@ outline-offset: 0; 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; @@ -355,6 +369,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 1rem; } @@ -401,6 +416,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .p-autocomplete-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -447,9 +463,11 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #b00020; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 3rem; } @@ -457,19 +475,23 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(0, 0, 0, 0.6); right: 4rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #b00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #3F51B5; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -496,7 +518,7 @@ border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -506,13 +528,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -521,14 +543,14 @@ line-height: 2.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 500; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #3F51B5; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -567,7 +589,7 @@ .p-datepicker table td.p-datepicker-today > span { background: #ffffff; color: rgba(0, 0, 0, 0.87); - border-color: rgb(0, 0, 0); + border-color: black; } .p-datepicker table td.p-datepicker-today > span.p-highlight { color: #3F51B5; @@ -677,6 +699,7 @@ outline-offset: 0; box-shadow: none; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 3rem; } @@ -684,10 +707,12 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(0, 0, 0, 0.6); right: 4rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -730,6 +755,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #b00020; } + .p-cascadeselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -769,6 +795,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f5f5f5; } @@ -778,9 +805,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #b00020; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 1rem; } @@ -788,6 +817,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -796,6 +826,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 18px; height: 18px; @@ -836,9 +867,11 @@ background: #3F51B5; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } @@ -851,12 +884,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #3F51B5; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(0, 0, 0, 0.87); } @@ -895,9 +931,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #b00020; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 2rem; } @@ -905,22 +943,26 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -964,6 +1006,7 @@ .p-dropdown.p-invalid.p-component { border-color: #b00020; } + .p-dropdown-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1027,6 +1070,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #f5f5f5; } @@ -1039,9 +1083,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #b00020; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1054,60 +1106,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid rgba(0, 0, 0, 0.38); } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 1rem; + color: rgba(0, 0, 0, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 1rem; + color: rgba(0, 0, 0, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #b00020; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 3rem; } @@ -1115,9 +1185,11 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #b00020; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 3rem; } @@ -1125,12 +1197,14 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 4rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 4rem; } + .p-inputswitch { width: 2.75rem; height: 1rem; @@ -1169,9 +1243,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(63, 81, 181, 0.5); } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #b00020; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1204,45 +1280,57 @@ font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-float-label > label { left: 1rem; color: rgba(0, 0, 0, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #b00020; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 1rem; color: rgba(0, 0, 0, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 3rem; } + .p-input-icon-left.p-float-label > label { left: 3rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 1rem; color: rgba(0, 0, 0, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 3rem; } + ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.6); } + :-moz-placeholder { color: rgba(0, 0, 0, 0.6); } + ::-moz-placeholder { color: rgba(0, 0, 0, 0.6); } + :-ms-input-placeholder { color: rgba(0, 0, 0, 0.6); } + .p-input-filled .p-inputtext { background-color: #f5f5f5; } @@ -1252,14 +1340,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #dcdcdc; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.875rem 0.875rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 1.25rem 1.25rem; } + .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1334,9 +1425,11 @@ box-shadow: none; border-color: #3F51B5; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #b00020; } + .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1376,9 +1469,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 2rem; } @@ -1386,6 +1481,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1474,6 +1570,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #f5f5f5; } @@ -1483,12 +1580,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #b00020; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #b00020; } + .p-password-panel { padding: 1rem; background: #ffffff; @@ -1510,6 +1610,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } + p-password.p-password-clearable .p-password-input { padding-right: 3rem; } @@ -1517,6 +1618,7 @@ color: rgba(0, 0, 0, 0.6); right: 1rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 5rem; } @@ -1524,6 +1626,7 @@ color: rgba(0, 0, 0, 0.6); right: 3rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1561,9 +1664,11 @@ background: #ffffff; color: #3F51B5; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #b00020; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f5f5f5; } @@ -1576,9 +1681,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1609,6 +1716,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b00020; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); @@ -1616,7 +1724,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1625,7 +1733,7 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1634,7 +1742,7 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button.p-highlight:hover { @@ -1643,12 +1751,14 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #b00020; } + .p-slider { background: #c1c1c1; border: 0 none; @@ -1700,6 +1810,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); @@ -1707,7 +1818,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1716,7 +1827,7 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1725,7 +1836,7 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button.p-highlight:hover { @@ -1734,12 +1845,14 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #b00020; } + .p-treeselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1776,12 +1889,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #b00020; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.5rem 1rem; } + .p-treeselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1841,6 +1957,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #f5f5f5; } @@ -1850,6 +1967,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 2rem; } @@ -1857,6 +1975,7 @@ color: rgba(0, 0, 0, 0.6); right: 3rem; } + .p-button { color: #ffffff; background: #3F51B5; @@ -1968,7 +2087,7 @@ padding: 0.714rem; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1995,426 +2114,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #ff4081; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: rgba(255, 64, 129, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: rgba(255, 64, 129, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #ff4081; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 64, 129, 0.04); color: #ff4081; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 64, 129, 0.16); color: #ff4081; border: 0 none; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #ff4081; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 64, 129, 0.04); border-color: transparent; color: #ff4081; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 64, 129, 0.16); border-color: transparent; color: #ff4081; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #2196f3; border: 0 none; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: rgba(33, 150, 243, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: rgba(33, 150, 243, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(33, 150, 243, 0.04); color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(33, 150, 243, 0.16); color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #2196f3; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(33, 150, 243, 0.04); border-color: transparent; color: #2196f3; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(33, 150, 243, 0.16); border-color: transparent; color: #2196f3; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689f38; border: 0 none; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: rgba(104, 159, 56, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: rgba(104, 159, 56, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(104, 159, 56, 0.16); color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #689f38; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689f38; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689f38; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #fbc02d; border: 0 none; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: rgba(251, 192, 45, 0.92); color: #212529; border-color: transparent; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: rgba(251, 192, 45, 0.68); color: #212529; border-color: transparent; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 192, 45, 0.16); color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fbc02d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #fbc02d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #fbc02d; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 0 none; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: rgba(156, 39, 176, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: rgba(156, 39, 176, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d32f2f; border: 0 none; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: rgba(211, 47, 47, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: rgba(211, 47, 47, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(211, 47, 47, 0.16); color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d32f2f; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #d32f2f; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #d32f2f; } + .p-button.p-button-link { color: #3F51B5; background: transparent; @@ -2438,6 +2565,7 @@ color: #3F51B5; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2449,14 +2577,17 @@ width: 2rem; height: 2rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: none; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2467,45 +2598,52 @@ background: rgba(255, 64, 129, 0.92); color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.32); } + .p-splitbutton { border-radius: 4px; } @@ -2583,6 +2721,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #ff4081; @@ -2611,6 +2750,7 @@ border-color: transparent; color: #ff4081; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #2196f3; @@ -2639,6 +2779,7 @@ border-color: transparent; color: #2196f3; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #689f38; @@ -2667,6 +2808,7 @@ border-color: transparent; color: #689f38; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fbc02d; @@ -2695,6 +2837,7 @@ border-color: transparent; color: #fbc02d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2723,6 +2866,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d32f2f; @@ -2751,8 +2895,9 @@ border-color: transparent; color: #d32f2f; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -2763,13 +2908,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2795,6 +2940,7 @@ background: rgba(63, 81, 181, 0.12); color: #3F51B5; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2888,9 +3034,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -2900,17 +3046,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2940,12 +3086,12 @@ background: #3F51B5; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #ffffff; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #ffffff; } .p-datatable .p-datatable-loading-icon { @@ -3048,6 +3194,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3086,10 +3233,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2.5rem; height: 2.5rem; @@ -3117,6 +3266,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-clear-button { width: 2.5rem; height: 2.5rem; @@ -3136,6 +3286,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-overlay { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3173,6 +3324,7 @@ border-top: 1px solid rgba(0, 0, 0, 0.12); margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12); @@ -3201,6 +3353,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3286,6 +3439,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(0, 0, 0, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 1rem 1rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3294,6 +3448,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); @@ -3332,6 +3487,7 @@ outline-offset: 0; box-shadow: none; } + .p-paginator { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3341,9 +3497,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(0, 0, 0, 0.6); @@ -3354,9 +3510,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); border-color: transparent; color: rgba(0, 0, 0, 0.6); @@ -3413,6 +3569,7 @@ border-color: transparent; color: rgba(0, 0, 0, 0.6); } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3498,6 +3655,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(0, 0, 0, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 1rem 1rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3506,6 +3664,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3517,19 +3676,20 @@ background-color: #bdbdbd; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e0e0e0; background: #ffffff; @@ -3586,11 +3746,11 @@ color: #3F51B5; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #3F51B5; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #3F51B5; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3663,6 +3823,7 @@ outline-offset: 0; box-shadow: none; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3802,7 +3963,7 @@ background: #3F51B5; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #ffffff; } .p-treetable .p-treetable-loading-icon { @@ -3863,6 +4024,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3887,6 +4049,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.5rem; border: 0 none; @@ -3959,6 +4122,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3984,6 +4148,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -4007,6 +4172,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e0e0e0; background: #ffffff; @@ -4047,6 +4213,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #e0e0e0; padding: 1rem; @@ -4113,6 +4280,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; @@ -4123,6 +4291,7 @@ outline-offset: 0; box-shadow: none; } + .p-splitter { border: 1px solid #e0e0e0; background: #ffffff; @@ -4144,6 +4313,7 @@ .p-splitter .p-splitter-gutter-resizing { background: rgba(0, 0, 0, 0.12); } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4212,6 +4382,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #ffffff; border: 1px solid #e0e0e0; @@ -4222,6 +4393,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4269,6 +4441,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4341,6 +4514,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4382,6 +4556,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4392,7 +4567,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2.5rem; height: 2.5rem; color: rgba(0, 0, 0, 0.6); @@ -4402,13 +4577,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -4422,6 +4597,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); color: #ffffff; @@ -4441,6 +4617,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: rgba(97, 97, 97, 0.9); } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1rem; @@ -4480,6 +4657,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: rgba(63, 81, 181, 0.92); color: #ffffff; @@ -4490,6 +4668,7 @@ color: #ffffff; border-color: transparent; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e5e5; @@ -4521,6 +4700,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(0, 0, 0, 0.6); } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4568,7 +4748,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4582,7 +4762,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4593,7 +4773,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-contextmenu .p-menuitem-separator { @@ -4607,6 +4787,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4630,31 +4811,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4713,7 +4895,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4727,7 +4909,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4738,7 +4920,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-megamenu .p-megamenu-panel { @@ -4796,9 +4978,10 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4835,7 +5018,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4849,7 +5032,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4860,7 +5043,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menu.p-menu-overlay { @@ -4894,6 +5077,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 1rem; background: transparent; @@ -4932,7 +5116,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4963,7 +5147,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4977,7 +5161,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4988,7 +5172,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-submenu-list { @@ -5005,6 +5189,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5179,7 +5364,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5193,7 +5378,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5204,7 +5389,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5244,6 +5429,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5286,7 +5472,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5300,7 +5486,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5311,7 +5497,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-slidemenu.p-slidemenu-overlay { @@ -5358,6 +5544,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5402,6 +5589,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -5472,6 +5660,7 @@ outline-offset: 0; box-shadow: inset none; } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5522,7 +5711,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5536,7 +5725,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5547,7 +5736,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-tieredmenu .p-menuitem-separator { @@ -5561,6 +5750,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 1rem 1rem; margin: 0; @@ -5616,6 +5806,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5704,6 +5895,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5754,7 +5946,7 @@ color: #01579b; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { @@ -5764,7 +5956,7 @@ color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5774,7 +5966,7 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { @@ -5784,9 +5976,10 @@ color: #b71c1c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #b71c1c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5817,7 +6010,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5874,7 +6067,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -5884,7 +6077,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } @@ -5893,23 +6086,29 @@ outline-offset: 0; box-shadow: none; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5933,6 +6132,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: rgba(0, 0, 0, 0.12); border-radius: 4px; @@ -5953,9 +6153,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #3F51B5; color: #ffffff; @@ -5997,6 +6199,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); @@ -6032,6 +6235,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -6046,6 +6250,7 @@ outline-offset: 0; box-shadow: none; } + .p-progressbar { border: 0 none; height: 4px; @@ -6061,6 +6266,7 @@ color: #ffffff; line-height: 4px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6082,6 +6288,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(0, 0, 0, 0.08); border-radius: 4px; @@ -6089,6 +6296,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #3F51B5; color: #ffffff; @@ -6121,6 +6329,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -6172,9 +6381,11 @@ .p-accordion .p-accordion-tab .p-accordion-header.p-disabled .p-accordion-header-link > * { opacity: 0.38; } + .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-input-filled .p-autocomplete .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6204,9 +6415,11 @@ background-image: none; background: transparent; } + .p-float-label .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding-top: 0; padding-bottom: 0; @@ -6236,18 +6449,21 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-breadcrumb .p-menuitem-link { padding: 0.25rem 0.5rem; } .p-breadcrumb .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-button { font-weight: 500; min-width: 4rem; @@ -6299,96 +6515,103 @@ .p-button.p-button-raised:enabled:focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - .p-button.p-button-secondary:enabled:focus, .p-button-group.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + + .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(255, 64, 129, 0.76); } - .p-button.p-button-secondary:enabled:active, .p-button-group.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { background: rgba(255, 64, 129, 0.68); } - .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-button-group.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { background: rgba(255, 64, 129, 0.12); } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-button-group.p-button-secondary > .p-button.p-button-text:enabled:active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { background: rgba(255, 64, 129, 0.16); } - .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { + .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { background-color: rgba(255, 64, 129, 0.16); } - .p-button.p-button-info:enabled:focus, .p-button-group.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + + .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(33, 150, 243, 0.76); } - .p-button.p-button-info:enabled:active, .p-button-group.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { background: rgba(33, 150, 243, 0.68); } - .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-button-group.p-button-info > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { background: rgba(33, 150, 243, 0.12); } - .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-button-group.p-button-info > .p-button.p-button-text:enabled:active, .p-button-group.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { background: rgba(33, 150, 243, 0.16); } - .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { + .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { background-color: rgba(33, 150, 243, 0.16); } - .p-button.p-button-success:enabled:focus, .p-button-group.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + + .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(104, 159, 56, 0.76); } - .p-button.p-button-success:enabled:active, .p-button-group.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { background: rgba(104, 159, 56, 0.68); } - .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-button-group.p-button-success > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { background: rgba(104, 159, 56, 0.12); } - .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-button-group.p-button-success > .p-button.p-button-text:enabled:active, .p-button-group.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { background: rgba(104, 159, 56, 0.16); } - .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { + .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { background-color: rgba(104, 159, 56, 0.16); } - .p-button.p-button-warning:enabled:focus, .p-button-group.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + + .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(251, 192, 45, 0.76); } - .p-button.p-button-warning:enabled:active, .p-button-group.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { background: rgba(251, 192, 45, 0.68); } - .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-button-group.p-button-warning > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { background: rgba(251, 192, 45, 0.12); } - .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-button-group.p-button-warning > .p-button.p-button-text:enabled:active, .p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { background: rgba(251, 192, 45, 0.16); } - .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { + .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { background-color: rgba(251, 192, 45, 0.16); } - .p-button.p-button-help:enabled:focus, .p-button-group.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + + .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(156, 39, 176, 0.76); } - .p-button.p-button-help:enabled:active, .p-button-group.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { background: rgba(156, 39, 176, 0.68); } - .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-button-group.p-button-help > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { background: rgba(156, 39, 176, 0.12); } - .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-button-group.p-button-help > .p-button.p-button-text:enabled:active, .p-button-group.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { background: rgba(156, 39, 176, 0.16); } - .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { + .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { background-color: rgba(156, 39, 176, 0.16); } - .p-button.p-button-danger:enabled:focus, .p-button-group.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + + .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(211, 47, 47, 0.76); } - .p-button.p-button-danger:enabled:active, .p-button-group.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { background: rgba(211, 47, 47, 0.68); } - .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-button-group.p-button-danger > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { background: rgba(211, 47, 47, 0.12); } - .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-button-group.p-button-danger > .p-button.p-button-text:enabled:active, .p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { background: rgba(211, 47, 47, 0.16); } - .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { + .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } + .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; @@ -6435,6 +6658,7 @@ .p-calendar-w-btn.p-calendar-disabled .p-inputtext { opacity: 1; } + .p-datepicker .p-datepicker-header { border-bottom: 0 none; } @@ -6460,6 +6684,7 @@ .p-datepicker table td.p-datepicker-today.p-highlight { box-shadow: 0 0 0 1px rgba(63, 81, 181, 0.12); } + p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } @@ -6472,6 +6697,7 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled .p-calendar-w-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6527,6 +6753,7 @@ border: 0 none; background-image: none; } + .p-cascadeselect .p-inputtext, .p-cascadeselect .p-cascadeselect-trigger { background-image: none; background: transparent; @@ -6537,9 +6764,11 @@ .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-cascadeselect-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } + .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6587,6 +6816,7 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + .p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -6606,13 +6836,16 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #ff4081; color: #ffffff; } + .p-checkbox { border-radius: 50%; transition: box-shadow 0.2s; @@ -6654,12 +6887,14 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12); } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #ffffff; } .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { background-color: #ffffff; } + @keyframes checkbox-check { 0% { width: 0; @@ -6682,6 +6917,7 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6711,9 +6947,11 @@ background-image: none; background: transparent; } + .p-float-label .p-chips-multiple-container .p-chips-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-token { padding-top: 0; padding-bottom: 0; @@ -6735,9 +6973,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-datatable .p-sortable-column { outline: 0 none; } @@ -6750,12 +6990,14 @@ .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus { background-color: rgba(0, 0, 0, 0.03); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #3F51B5; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #3F51B5; } + .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; @@ -6766,9 +7008,11 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-dropdown-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } + .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6812,9 +7056,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-galleria .p-galleria-indicators { padding: 1rem; } @@ -6826,12 +7072,14 @@ background: rgba(255, 64, 129, 0.68); color: #ffffff; } + .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } .p-inputtext:enabled:focus.ng-invalid.ng-dirty { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled .p-inputtext { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6861,6 +7109,7 @@ box-shadow: none; border-color: transparent; } + .p-input-filled .p-inputgroup .p-inputgroup-addon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6875,24 +7124,26 @@ border-right-color: transparent; } .p-input-filled .p-inputgroup-addon:first-child, - .p-input-filled .p-inputgroup button:first-child, - .p-input-filled .p-inputgroup input:first-child { +.p-input-filled .p-inputgroup button:first-child, +.p-input-filled .p-inputgroup input:first-child { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:first-child input { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup-addon:last-child, - .p-input-filled .p-inputgroup button:last-child, - .p-input-filled .p-inputgroup input:last-child { +.p-input-filled .p-inputgroup button:last-child, +.p-input-filled .p-inputgroup input:last-child { border-bottom-right-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:last-child input { border-bottom-right-radius: 0; } + p-inputmask.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled p-inputmask.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); @@ -6901,9 +7152,11 @@ box-shadow: none; border-color: transparent; } + p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled p-inputnumber.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); @@ -6912,6 +7165,7 @@ box-shadow: none; border-color: transparent; } + .p-inputswitch .p-inputswitch-slider:before { transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); @@ -6928,45 +7182,51 @@ .p-inputswitch.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-fieldset .p-fieldset-legend { border: 0 none; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { background: rgba(0, 0, 0, 0.12); } + .p-float-label input:focus ~ label, - .p-float-label input.p-filled ~ label, - .p-float-label textarea:focus ~ label, - .p-float-label textarea.p-filled ~ label, - .p-float-label .p-inputwrapper-focus ~ label, - .p-float-label .p-inputwrapper-filled ~ label { +.p-float-label input.p-filled ~ label, +.p-float-label textarea:focus ~ label, +.p-float-label textarea.p-filled ~ label, +.p-float-label .p-inputwrapper-focus ~ label, +.p-float-label .p-inputwrapper-filled ~ label { top: -0.5rem !important; background-color: #ffffff; padding: 2px 4px; margin-left: -4px; margin-top: 0; } + .p-float-label textarea ~ label { margin-top: 0; } + .p-float-label input:focus ~ label, - .p-float-label .p-inputwrapper-focus ~ label { +.p-float-label .p-inputwrapper-focus ~ label { color: #3F51B5; } + .p-input-filled .p-float-label .p-inputtext { padding-top: 1.5rem; padding-bottom: 0.5rem; } .p-input-filled .p-float-label input:focus ~ label, - .p-input-filled .p-float-label input.p-filled ~ label, - .p-input-filled .p-float-label textarea:focus ~ label, - .p-input-filled .p-float-label textarea.p-filled ~ label, - .p-input-filled .p-float-label .p-inputwrapper-focus ~ label, - .p-input-filled .p-float-label .p-inputwrapper-filled ~ label { +.p-input-filled .p-float-label input.p-filled ~ label, +.p-input-filled .p-float-label textarea:focus ~ label, +.p-input-filled .p-float-label textarea.p-filled ~ label, +.p-input-filled .p-float-label .p-inputwrapper-focus ~ label, +.p-input-filled .p-float-label .p-inputwrapper-filled ~ label { top: 0.25rem !important; margin-top: 0; background: transparent; } + .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } @@ -6976,21 +7236,25 @@ .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-menu .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -7001,6 +7265,7 @@ .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } @@ -7013,6 +7278,7 @@ .p-multiselect-panel .p-multiselect-close:focus { background: rgba(0, 0, 0, 0.12); } + .p-input-filled .p-multiselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -7046,11 +7312,13 @@ background-image: none; background: transparent; } + .p-float-label .p-multiselect-label .p-multiselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-multiselect .p-multiselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -7079,18 +7347,22 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-orderlist .p-orderlist-list .p-orderlist-item:focus { background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } + .p-paginator { justify-content: flex-end; } @@ -7100,13 +7372,14 @@ .p-paginator .p-paginator-element:focus.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-panel { border-radius: 4px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); } .p-panel .p-panel-header, - .p-panel .p-panel-content, - .p-panel .p-panel-footer { +.p-panel .p-panel-content, +.p-panel .p-panel-footer { border: 0 none; } .p-panel .p-panel-content { @@ -7118,6 +7391,7 @@ .p-panel .p-panel-header-icon:focus { background: rgba(0, 0, 0, 0.12); } + .p-panelmenu .p-panelmenu-panel { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; @@ -7153,18 +7427,21 @@ .p-panelmenu .p-panelmenu-panel .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item:focus { background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-progressbar { border-radius: 0; } .p-progressbar .p-progressbar-label { display: none !important; } + .p-radiobutton { border-radius: 50%; transition: box-shadow 0.2s; @@ -7190,12 +7467,14 @@ .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12); } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #ffffff; } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #ffffff; } + .p-rating { gap: 0; } @@ -7217,6 +7496,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item { background: rgba(176, 0, 32, 0.04); } + .p-selectbutton .p-button:focus { background: #e0e0e1; border-color: #e0e0e1; @@ -7225,12 +7505,14 @@ background: #d9d8d9; border-color: #d9d8d9; } + .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-slider .p-slider-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); @@ -7241,6 +7523,7 @@ .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } + .p-steps { padding: 1rem 0; } @@ -7293,6 +7576,7 @@ .p-steps .p-steps-item.p-disabled { opacity: 1; } + .p-tabview .p-tabview-nav { position: relative; } @@ -7315,9 +7599,11 @@ background-color: #3F51B5; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-toolbar { border: 0 none; } + .p-tooltip .p-tooltip-text { box-shadow: none; font-size: 0.875rem; @@ -7325,12 +7611,14 @@ .p-tooltip .p-tooltip-arrow { display: none; } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; @@ -7341,9 +7629,11 @@ .p-treeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-treeselect-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } + .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -7377,11 +7667,13 @@ background-image: none; background: transparent; } + .p-float-label .p-treeselect-label .p-treeselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-treeselect .p-treeselect-label { padding-top: 1.5rem; padding-bottom: 0.5rem; @@ -7410,9 +7702,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + .p-treeselect.p-invalid:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-tree .p-tree-container .p-treenode { outline: 0 none; } @@ -7422,6 +7716,7 @@ .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-treetable .p-sortable-column { outline: 0 none; } @@ -7434,6 +7729,7 @@ .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus { background-color: rgba(0, 0, 0, 0.03); } + .p-tabmenu .p-tabmenu-nav { position: relative; } @@ -7458,12 +7754,14 @@ background-color: #3F51B5; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { margin: 0.5rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { margin: 0 0.5rem; } + .p-togglebutton.p-button:focus { background: #e0e0e1; border-color: #e0e0e1; @@ -7472,6 +7770,7 @@ background: #d9d8d9; border-color: #d9d8d9; } + .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(63, 81, 181, 0.12); } @@ -7503,45 +7802,53 @@ .p-splitbutton.p-button-raised > .p-button:not(:disabled):focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(255, 64, 129, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { background: rgba(255, 64, 129, 0.16); } + .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(33, 150, 243, 0.12); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active { background: rgba(33, 150, 243, 0.16); } + .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(104, 159, 56, 0.12); } .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active { background: rgba(104, 159, 56, 0.16); } + .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(251, 192, 45, 0.12); } .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active { background: rgba(251, 192, 45, 0.16); } + .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(156, 39, 176, 0.12); } .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active { background: rgba(156, 39, 176, 0.16); } + .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(211, 47, 47, 0.12); } .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(211, 47, 47, 0.16); } + .p-scrollpanel .p-scrollpanel-bar:focus { box-shadow: 0 0 1px 4px rgba(255, 64, 129, 0.2); } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css index cfa5abbc4fc..d99b0f512f2 100644 --- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css @@ -54,21 +54,24 @@ font-family: "Roboto"; font-style: normal; font-weight: 400; - src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; - src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; - src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f4fafe; @@ -241,7 +244,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 0.75rem 0.75rem; @@ -296,32 +299,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.32); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.38; } + .p-error { color: #f44435; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -333,12 +344,15 @@ outline-offset: 0; 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; @@ -355,6 +369,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -387,7 +402,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -395,12 +410,13 @@ margin-left: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.87); } .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-autocomplete-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -429,11 +445,11 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { margin: 0; @@ -447,9 +463,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f44435; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -457,24 +475,28 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.5rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #CE93D8; } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -491,12 +513,12 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -506,13 +528,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -521,14 +543,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 500; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #CE93D8; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -575,13 +597,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 0.75rem 0; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -640,7 +662,7 @@ background: rgba(206, 147, 216, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0, 0%, 100%, 0.12); + border-left: 1px solid rgba(255, 255, 255, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -677,6 +699,7 @@ outline-offset: 0; box-shadow: none; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -684,10 +707,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.5rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -695,7 +720,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -730,6 +755,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44435; } + .p-cascadeselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -757,11 +783,11 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { padding: 0.75rem 0.75rem; @@ -769,18 +795,21 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44435; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -788,6 +817,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.75rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -796,12 +826,13 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 18px; height: 18px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -836,27 +867,32 @@ background: #CE93D8; color: #121212; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; } + .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #CE93D8; } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #CE93D8; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(255, 255, 255, 0.6); } @@ -873,12 +909,12 @@ .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.87); } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -895,9 +931,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f44435; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -905,25 +943,29 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #2b2b2b; border: 1px solid #1e1e1e; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -964,6 +1006,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f44435; } + .p-dropdown-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -973,7 +1016,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1009,11 +1052,11 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -1027,87 +1070,114 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f44435; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0, 0%, 100%, 0.3); - border-left: 1px solid hsla(0, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); + border-top: 1px solid rgba(255, 255, 255, 0.3); + border-left: 1px solid rgba(255, 255, 255, 0.3); + border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 0.75rem 0.75rem; min-width: 2.75rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0, 0%, 100%, 0.3); + border-right: 1px solid rgba(255, 255, 255, 0.3); } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.75rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1115,9 +1185,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44435; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1125,18 +1197,20 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.5rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.5rem; } + .p-inputswitch { width: 2.75rem; height: 1rem; } .p-inputswitch .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; } @@ -1158,7 +1232,7 @@ box-shadow: none; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); @@ -1169,9 +1243,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44435; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,7 +1255,7 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 0.75rem 0.75rem; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1204,72 +1280,87 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f44435; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-listbox .p-listbox-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1322,11 +1413,11 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-listbox.p-focus { outline: 0 none; @@ -1334,12 +1425,14 @@ box-shadow: none; border-color: #CE93D8; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f44435; } + .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1362,7 +1455,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1376,9 +1469,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1386,6 +1481,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.75rem; } + .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1395,7 +1491,7 @@ } .p-multiselect-panel .p-multiselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1453,11 +1549,11 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1474,21 +1570,25 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f44435; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f44435; } + .p-password-panel { padding: 0.75rem; background: #1e1e1e; @@ -1510,6 +1610,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1517,6 +1618,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1524,12 +1626,13 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; width: 20px; height: 20px; @@ -1561,14 +1664,16 @@ background: #121212; color: #CE93D8; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44435; } + .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #121212; @@ -1576,9 +1681,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #121212; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1609,6 +1716,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f44435; } + .p-selectbutton .p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); @@ -1616,7 +1724,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1625,7 +1733,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1634,7 +1742,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight:hover { @@ -1643,14 +1751,16 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f44435; } + .p-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); border: 0 none; border-radius: 4px; } @@ -1700,6 +1810,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); @@ -1707,7 +1818,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1716,7 +1827,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1725,7 +1836,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight:hover { @@ -1734,15 +1845,17 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f44435; } + .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1765,7 +1878,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1776,12 +1889,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44435; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1791,7 +1907,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1841,15 +1957,17 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1857,6 +1975,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.75rem; } + .p-button { color: #121212; background: #CE93D8; @@ -1968,7 +2087,7 @@ padding: 0.643rem; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1995,426 +2114,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.75rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #A5D6A7; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: rgba(165, 214, 167, 0.92); color: #121212; border-color: transparent; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: rgba(165, 214, 167, 0.68); color: #121212; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #A5D6A7; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(165, 214, 167, 0.04); color: #A5D6A7; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(165, 214, 167, 0.16); color: #A5D6A7; border: 0 none; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #A5D6A7; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(165, 214, 167, 0.04); border-color: transparent; color: #A5D6A7; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(165, 214, 167, 0.16); border-color: transparent; color: #A5D6A7; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #212121; background: #90caf9; border: 0 none; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: rgba(144, 202, 249, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: rgba(144, 202, 249, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(144, 202, 249, 0.04); color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(144, 202, 249, 0.16); color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #90caf9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(144, 202, 249, 0.04); border-color: transparent; color: #90caf9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(144, 202, 249, 0.16); border-color: transparent; color: #90caf9; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #212121; background: #c5e1a5; border: 0 none; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: rgba(197, 225, 165, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: rgba(197, 225, 165, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212121; background: #fff59d; border: 0 none; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: rgba(255, 245, 157, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: rgba(255, 245, 157, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 245, 157, 0.04); color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 245, 157, 0.16); color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fff59d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 245, 157, 0.04); border-color: transparent; color: #fff59d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 245, 157, 0.16); border-color: transparent; color: #fff59d; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #212121; background: #ce93d8; border: 0 none; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: rgba(206, 147, 216, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: rgba(206, 147, 216, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #212121; background: #ef9a9a; border: 0 none; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: rgba(239, 154, 154, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: rgba(239, 154, 154, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 154, 154, 0.04); color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 154, 154, 0.16); color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef9a9a; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 154, 154, 0.04); border-color: transparent; color: #ef9a9a; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 154, 154, 0.16); border-color: transparent; color: #ef9a9a; } + .p-button.p-button-link { color: #CE93D8; background: transparent; @@ -2438,6 +2565,7 @@ color: #CE93D8; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2449,14 +2577,17 @@ width: 2rem; height: 2rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: none; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2467,45 +2598,52 @@ background: rgba(165, 214, 167, 0.92); color: #212121; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.32); } + .p-splitbutton { border-radius: 4px; } @@ -2583,6 +2721,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #A5D6A7; @@ -2611,6 +2750,7 @@ border-color: transparent; color: #A5D6A7; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #90caf9; @@ -2639,6 +2779,7 @@ border-color: transparent; color: #90caf9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2667,6 +2808,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fff59d; @@ -2695,6 +2837,7 @@ border-color: transparent; color: #fff59d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2723,6 +2866,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ef9a9a; @@ -2751,8 +2895,9 @@ border-color: transparent; color: #ef9a9a; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2763,13 +2908,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2795,6 +2940,7 @@ background: rgba(206, 147, 216, 0.16); color: #CE93D8; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2888,9 +3034,9 @@ padding: 0.75rem 0.75rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2900,17 +3046,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2940,12 +3086,12 @@ background: #CE93D8; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1e1e1e; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1e1e1e; } .p-datatable .p-datatable-loading-icon { @@ -3048,6 +3194,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.9375rem 0.9375rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3086,10 +3233,12 @@ .p-dataview .p-dataview-emptymessage { padding: 0.75rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3117,6 +3266,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3136,6 +3286,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-overlay { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -3162,7 +3313,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3170,12 +3321,13 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3184,7 +3336,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3201,6 +3353,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.75rem; } + .p-orderlist .p-orderlist-controls { padding: 0.75rem; } @@ -3258,12 +3411,12 @@ transition: none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #CE93D8; @@ -3277,15 +3430,16 @@ color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list:not(.cdk-drop-list-dragging) .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 0.75rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3294,8 +3448,9 @@ background: #1e1e1e; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3332,6 +3487,7 @@ outline-offset: 0; box-shadow: none; } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3341,9 +3497,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3354,9 +3510,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); border-color: transparent; color: rgba(255, 255, 255, 0.6); @@ -3413,6 +3569,7 @@ border-color: transparent; color: rgba(255, 255, 255, 0.6); } + .p-picklist .p-picklist-buttons { padding: 0.75rem; } @@ -3470,12 +3627,12 @@ transition: none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #CE93D8; @@ -3489,15 +3646,16 @@ color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list:not(.cdk-drop-list-dragging) .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 0.75rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3506,6 +3664,7 @@ background: #1e1e1e; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3517,19 +3676,20 @@ background-color: #bdbdbd; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3586,19 +3746,19 @@ color: #CE93D8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #CE93D8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #CE93D8; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -3655,7 +3815,7 @@ color: inherit; } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content:focus { @@ -3663,6 +3823,7 @@ outline-offset: 0; box-shadow: none; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3802,7 +3963,7 @@ background: #CE93D8; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1e1e1e; } .p-treetable .p-treetable-loading-icon { @@ -3863,6 +4024,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.9375rem 0.9375rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3887,6 +4049,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 0 none; @@ -3959,6 +4122,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3984,6 +4148,7 @@ .p-card .p-card-footer { padding: 0.75rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3992,7 +4157,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0, 0%, 100%, 0.12); + border-top: 1px rgba(255, 255, 255, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4002,11 +4167,12 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0, 0%, 100%, 0.12); + border-left: 1px rgba(255, 255, 255, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -4047,6 +4213,7 @@ .p-fieldset .p-fieldset-content { padding: 0.75rem; } + .p-panel .p-panel-header { border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.75rem; @@ -4113,6 +4280,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; @@ -4123,6 +4291,7 @@ outline-offset: 0; box-shadow: none; } + .p-splitter { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -4131,10 +4300,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4142,8 +4311,9 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.75rem; } @@ -4212,6 +4382,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4222,6 +4393,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4269,6 +4441,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4341,6 +4514,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4382,6 +4556,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #262626; } + .p-sidebar { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4392,7 +4567,7 @@ padding: 0.75rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4402,13 +4577,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -4422,6 +4597,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.75rem; } + .p-tooltip .p-tooltip-text { background: #444444; color: rgba(255, 255, 255, 0.87); @@ -4441,6 +4617,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #444444; } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 0.75rem; @@ -4480,6 +4657,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: rgba(206, 147, 216, 0.92); color: #121212; @@ -4490,6 +4668,7 @@ color: #121212; border-color: transparent; } + .p-breadcrumb { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4521,6 +4700,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.5rem 0; background: #2b2b2b; @@ -4568,7 +4748,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4576,13 +4756,13 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4593,11 +4773,11 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4607,6 +4787,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4630,31 +4811,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4713,7 +4895,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4721,13 +4903,13 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4738,7 +4920,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-megamenu .p-megamenu-panel { @@ -4761,7 +4943,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -4796,9 +4978,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } + .p-menu { padding: 0.5rem 0; background: #1e1e1e; @@ -4835,7 +5018,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4843,13 +5026,13 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4860,7 +5043,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menu.p-menu-overlay { @@ -4878,7 +5061,7 @@ border-top-left-radius: 0; } .p-menu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menu .p-menuitem-badge { @@ -4894,6 +5077,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.75rem; background: #1e1e1e; @@ -4932,7 +5116,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4963,7 +5147,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4971,13 +5155,13 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4988,7 +5172,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-submenu-list { @@ -4999,12 +5183,13 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5036,7 +5221,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5179,7 +5364,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5187,13 +5372,13 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5204,14 +5389,14 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -5244,6 +5429,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5286,7 +5472,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5294,13 +5480,13 @@ } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5311,7 +5497,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu.p-slidemenu-overlay { @@ -5326,7 +5512,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-slidemenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5358,6 +5544,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5394,7 +5581,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); width: 100%; top: 50%; left: 0; @@ -5402,6 +5589,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -5472,6 +5660,7 @@ outline-offset: 0; box-shadow: inset none; } + .p-tieredmenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5522,7 +5711,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5530,13 +5719,13 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5547,11 +5736,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -5561,6 +5750,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5616,6 +5806,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 0.75rem 0; border-radius: 4px; @@ -5704,6 +5895,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5754,7 +5946,7 @@ color: #01579b; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { @@ -5764,7 +5956,7 @@ color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5774,7 +5966,7 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { @@ -5784,9 +5976,10 @@ color: #b71c1c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #b71c1c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5817,7 +6010,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5874,7 +6067,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -5884,7 +6077,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } @@ -5893,23 +6086,29 @@ outline-offset: 0; box-shadow: none; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5933,8 +6132,9 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: rgba(255, 255, 255, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -5953,9 +6153,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1e1e1e; } + .p-badge { background: #CE93D8; color: #121212; @@ -5997,8 +6199,9 @@ height: 3rem; line-height: 3rem; } + .p-chip { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 0.75rem; @@ -6032,6 +6235,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -6046,6 +6250,7 @@ outline-offset: 0; box-shadow: none; } + .p-progressbar { border: 0 none; height: 4px; @@ -6061,6 +6266,7 @@ color: #121212; line-height: 4px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6082,6 +6288,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -6089,6 +6296,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #CE93D8; color: #121212; @@ -6121,6 +6329,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -6172,15 +6381,17 @@ .p-accordion .p-accordion-tab .p-accordion-header.p-disabled .p-accordion-header-link > * { opacity: 0.38; } + .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-input-filled .p-autocomplete .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6190,13 +6401,13 @@ background-color: transparent; } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6204,9 +6415,11 @@ background-image: none; background: transparent; } + .p-float-label .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding-top: 0; padding-bottom: 0; @@ -6236,18 +6449,21 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-breadcrumb .p-menuitem-link { padding: 0.25rem 0.5rem; } .p-breadcrumb .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-button { font-weight: 500; min-width: 4rem; @@ -6299,98 +6515,105 @@ .p-button.p-button-raised:enabled:focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - .p-button.p-button-secondary:enabled:focus, .p-button-group.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + + .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(165, 214, 167, 0.76); } - .p-button.p-button-secondary:enabled:active, .p-button-group.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { background: rgba(165, 214, 167, 0.68); } - .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-button-group.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { background: rgba(165, 214, 167, 0.12); } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-button-group.p-button-secondary > .p-button.p-button-text:enabled:active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { background: rgba(165, 214, 167, 0.16); } - .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { + .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { background-color: rgba(165, 214, 167, 0.16); } - .p-button.p-button-info:enabled:focus, .p-button-group.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + + .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(144, 202, 249, 0.76); } - .p-button.p-button-info:enabled:active, .p-button-group.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { background: rgba(144, 202, 249, 0.68); } - .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-button-group.p-button-info > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { background: rgba(144, 202, 249, 0.12); } - .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-button-group.p-button-info > .p-button.p-button-text:enabled:active, .p-button-group.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { background: rgba(144, 202, 249, 0.16); } - .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { + .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { background-color: rgba(144, 202, 249, 0.16); } - .p-button.p-button-success:enabled:focus, .p-button-group.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + + .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(197, 225, 165, 0.76); } - .p-button.p-button-success:enabled:active, .p-button-group.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { background: rgba(197, 225, 165, 0.68); } - .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-button-group.p-button-success > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { background: rgba(197, 225, 165, 0.12); } - .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-button-group.p-button-success > .p-button.p-button-text:enabled:active, .p-button-group.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { background: rgba(197, 225, 165, 0.16); } - .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { + .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { background-color: rgba(197, 225, 165, 0.16); } - .p-button.p-button-warning:enabled:focus, .p-button-group.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + + .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(255, 245, 157, 0.76); } - .p-button.p-button-warning:enabled:active, .p-button-group.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { background: rgba(255, 245, 157, 0.68); } - .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-button-group.p-button-warning > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { background: rgba(255, 245, 157, 0.12); } - .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-button-group.p-button-warning > .p-button.p-button-text:enabled:active, .p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { background: rgba(255, 245, 157, 0.16); } - .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { + .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { background-color: rgba(255, 245, 157, 0.16); } - .p-button.p-button-help:enabled:focus, .p-button-group.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + + .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(206, 147, 216, 0.76); } - .p-button.p-button-help:enabled:active, .p-button-group.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { background: rgba(206, 147, 216, 0.68); } - .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-button-group.p-button-help > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { background: rgba(206, 147, 216, 0.12); } - .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-button-group.p-button-help > .p-button.p-button-text:enabled:active, .p-button-group.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { background: rgba(206, 147, 216, 0.16); } - .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { + .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { background-color: rgba(206, 147, 216, 0.16); } - .p-button.p-button-danger:enabled:focus, .p-button-group.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + + .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(239, 154, 154, 0.76); } - .p-button.p-button-danger:enabled:active, .p-button-group.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { background: rgba(239, 154, 154, 0.68); } - .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-button-group.p-button-danger > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { background: rgba(239, 154, 154, 0.12); } - .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-button-group.p-button-danger > .p-button.p-button-text:enabled:active, .p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { background: rgba(239, 154, 154, 0.16); } - .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { + .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } + .p-calendar-w-btn { - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6435,6 +6658,7 @@ .p-calendar-w-btn.p-calendar-disabled .p-inputtext { opacity: 1; } + .p-datepicker .p-datepicker-header { border-bottom: 0 none; } @@ -6449,7 +6673,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6460,6 +6684,7 @@ .p-datepicker table td.p-datepicker-today.p-highlight { box-shadow: 0 0 0 1px rgba(206, 147, 216, 0.16); } + p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } @@ -6472,12 +6697,13 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled .p-calendar-w-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6487,13 +6713,13 @@ background-color: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6527,6 +6753,7 @@ border: 0 none; background-image: none; } + .p-cascadeselect .p-inputtext, .p-cascadeselect .p-cascadeselect-trigger { background-image: none; background: transparent; @@ -6537,15 +6764,17 @@ .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-cascadeselect-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } + .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6555,13 +6784,13 @@ background-color: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6587,6 +6816,7 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + .p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -6606,27 +6836,30 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #A5D6A7; color: #121212; } + .p-checkbox { border-radius: 50%; transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -6654,12 +6887,14 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12); } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #1e1e1e; } .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { background-color: #1e1e1e; } + @keyframes checkbox-check { 0% { width: 0; @@ -6682,12 +6917,13 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6697,13 +6933,13 @@ background-color: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6711,9 +6947,11 @@ background-image: none; background: transparent; } + .p-float-label .p-chips-multiple-container .p-chips-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-token { padding-top: 0; padding-bottom: 0; @@ -6735,9 +6973,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-datatable .p-sortable-column { outline: 0 none; } @@ -6750,12 +6990,14 @@ .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus { background-color: rgba(255, 255, 255, 0.03); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #CE93D8; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #CE93D8; } + .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; @@ -6766,15 +7008,17 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-dropdown-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } + .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6784,13 +7028,13 @@ background-color: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6812,9 +7056,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-galleria .p-galleria-indicators { padding: 1rem; } @@ -6826,30 +7072,32 @@ background: rgba(165, 214, 167, 0.68); color: #121212; } + .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } .p-inputtext:enabled:focus.ng-invalid.ng-dirty { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled .p-inputtext { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6861,12 +7109,13 @@ box-shadow: none; border-color: transparent; } + .p-input-filled .p-inputgroup .p-inputgroup-addon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6875,24 +7124,26 @@ border-right-color: transparent; } .p-input-filled .p-inputgroup-addon:first-child, - .p-input-filled .p-inputgroup button:first-child, - .p-input-filled .p-inputgroup input:first-child { +.p-input-filled .p-inputgroup button:first-child, +.p-input-filled .p-inputgroup input:first-child { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:first-child input { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup-addon:last-child, - .p-input-filled .p-inputgroup button:last-child, - .p-input-filled .p-inputgroup input:last-child { +.p-input-filled .p-inputgroup button:last-child, +.p-input-filled .p-inputgroup input:last-child { border-bottom-right-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:last-child input { border-bottom-right-radius: 0; } + p-inputmask.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled p-inputmask.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); @@ -6901,9 +7152,11 @@ box-shadow: none; border-color: transparent; } + p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled p-inputnumber.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); @@ -6912,6 +7165,7 @@ box-shadow: none; border-color: transparent; } + .p-inputswitch .p-inputswitch-slider:before { transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); @@ -6928,45 +7182,51 @@ .p-inputswitch.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } + .p-fieldset .p-fieldset-legend { border: 0 none; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { background: rgba(255, 255, 255, 0.12); } + .p-float-label input:focus ~ label, - .p-float-label input.p-filled ~ label, - .p-float-label textarea:focus ~ label, - .p-float-label textarea.p-filled ~ label, - .p-float-label .p-inputwrapper-focus ~ label, - .p-float-label .p-inputwrapper-filled ~ label { +.p-float-label input.p-filled ~ label, +.p-float-label textarea:focus ~ label, +.p-float-label textarea.p-filled ~ label, +.p-float-label .p-inputwrapper-focus ~ label, +.p-float-label .p-inputwrapper-filled ~ label { top: -0.5rem !important; background-color: #1e1e1e; padding: 2px 4px; margin-left: -4px; margin-top: 0; } + .p-float-label textarea ~ label { margin-top: 0; } + .p-float-label input:focus ~ label, - .p-float-label .p-inputwrapper-focus ~ label { +.p-float-label .p-inputwrapper-focus ~ label { color: #CE93D8; } + .p-input-filled .p-float-label .p-inputtext { padding-top: 1.25rem; padding-bottom: 0.25rem; } .p-input-filled .p-float-label input:focus ~ label, - .p-input-filled .p-float-label input.p-filled ~ label, - .p-input-filled .p-float-label textarea:focus ~ label, - .p-input-filled .p-float-label textarea.p-filled ~ label, - .p-input-filled .p-float-label .p-inputwrapper-focus ~ label, - .p-input-filled .p-float-label .p-inputwrapper-filled ~ label { +.p-input-filled .p-float-label input.p-filled ~ label, +.p-input-filled .p-float-label textarea:focus ~ label, +.p-input-filled .p-float-label textarea.p-filled ~ label, +.p-input-filled .p-float-label .p-inputwrapper-focus ~ label, +.p-input-filled .p-float-label .p-inputwrapper-filled ~ label { top: 0.25rem !important; margin-top: 0; background: transparent; } + .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } @@ -6976,21 +7236,25 @@ .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-menu .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -7001,6 +7265,7 @@ .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } @@ -7013,12 +7278,13 @@ .p-multiselect-panel .p-multiselect-close:focus { background: rgba(255, 255, 255, 0.12); } + .p-input-filled .p-multiselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7028,13 +7294,13 @@ background-color: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7046,11 +7312,13 @@ background-image: none; background: transparent; } + .p-float-label .p-multiselect-label .p-multiselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-multiselect .p-multiselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -7079,18 +7347,22 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-orderlist .p-orderlist-list .p-orderlist-item:focus { background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } + .p-paginator { justify-content: flex-end; } @@ -7100,13 +7372,14 @@ .p-paginator .p-paginator-element:focus.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-panel { border-radius: 4px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); } .p-panel .p-panel-header, - .p-panel .p-panel-content, - .p-panel .p-panel-footer { +.p-panel .p-panel-content, +.p-panel .p-panel-footer { border: 0 none; } .p-panel .p-panel-content { @@ -7118,6 +7391,7 @@ .p-panel .p-panel-header-icon:focus { background: rgba(255, 255, 255, 0.12); } + .p-panelmenu .p-panelmenu-panel { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; @@ -7153,27 +7427,30 @@ .p-panelmenu .p-panelmenu-panel .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item:focus { background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-progressbar { border-radius: 0; } .p-progressbar .p-progressbar-label { display: none !important; } + .p-radiobutton { border-radius: 50%; transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #CE93D8; @@ -7190,12 +7467,14 @@ .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12); } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #1e1e1e; } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #1e1e1e; } + .p-rating { gap: 0; } @@ -7217,6 +7496,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item { background: rgba(244, 68, 53, 0.04); } + .p-selectbutton .p-button:focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); @@ -7225,12 +7505,14 @@ background: #262626; border-color: rgba(255, 255, 255, 0.12); } + .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-slider .p-slider-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); @@ -7241,6 +7523,7 @@ .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } + .p-steps { padding: 1rem 0; } @@ -7293,6 +7576,7 @@ .p-steps .p-steps-item.p-disabled { opacity: 1; } + .p-tabview .p-tabview-nav { position: relative; } @@ -7315,9 +7599,11 @@ background-color: #CE93D8; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-toolbar { border: 0 none; } + .p-tooltip .p-tooltip-text { box-shadow: none; font-size: 0.875rem; @@ -7325,12 +7611,14 @@ .p-tooltip .p-tooltip-arrow { display: none; } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; @@ -7341,15 +7629,17 @@ .p-treeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-treeselect-item .p-ink { background-color: rgba(206, 147, 216, 0.16); } + .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7359,13 +7649,13 @@ background-color: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7377,11 +7667,13 @@ background-image: none; background: transparent; } + .p-float-label .p-treeselect-label .p-treeselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-treeselect .p-treeselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -7410,9 +7702,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + .p-treeselect.p-invalid:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-tree .p-tree-container .p-treenode { outline: 0 none; } @@ -7422,6 +7716,7 @@ .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(206, 147, 216, 0.24); } + .p-treetable .p-sortable-column { outline: 0 none; } @@ -7434,6 +7729,7 @@ .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus { background-color: rgba(255, 255, 255, 0.03); } + .p-tabmenu .p-tabmenu-nav { position: relative; } @@ -7458,12 +7754,14 @@ background-color: #CE93D8; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { margin: 0.5rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { margin: 0 0.5rem; } + .p-togglebutton.p-button:focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); @@ -7472,6 +7770,7 @@ background: #262626; border-color: rgba(255, 255, 255, 0.12); } + .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(206, 147, 216, 0.12); } @@ -7503,45 +7802,53 @@ .p-splitbutton.p-button-raised > .p-button:not(:disabled):focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(165, 214, 167, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { background: rgba(165, 214, 167, 0.16); } + .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(144, 202, 249, 0.12); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active { background: rgba(144, 202, 249, 0.16); } + .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(197, 225, 165, 0.12); } .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active { background: rgba(197, 225, 165, 0.16); } + .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(255, 245, 157, 0.12); } .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active { background: rgba(255, 245, 157, 0.16); } + .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(206, 147, 216, 0.12); } .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active { background: rgba(206, 147, 216, 0.16); } + .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(239, 154, 154, 0.12); } .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(239, 154, 154, 0.16); } + .p-scrollpanel .p-scrollpanel-bar:focus { box-shadow: 0 0 1px 4px rgba(165, 214, 167, 0.2); } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css index a2335afc448..eac23eb98a5 100644 --- a/src/assets/components/themes/mdc-dark-indigo/theme.css +++ b/src/assets/components/themes/mdc-dark-indigo/theme.css @@ -54,21 +54,24 @@ font-family: "Roboto"; font-style: normal; font-weight: 400; - src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; - src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; - src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f4fafe; @@ -241,7 +244,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 0.75rem 0.75rem; @@ -296,32 +299,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.32); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.38; } + .p-error { color: #f44435; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -333,12 +344,15 @@ outline-offset: 0; 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; @@ -355,6 +369,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -387,7 +402,7 @@ } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -395,12 +410,13 @@ margin-left: 0.5rem; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.87); } .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f44435; } + .p-autocomplete-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -429,11 +445,11 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { margin: 0; @@ -447,9 +463,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f44435; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -457,24 +475,28 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.5rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #9FA8DA; } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -491,12 +513,12 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -506,13 +528,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -521,14 +543,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 500; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #9FA8DA; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -575,13 +597,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 0.75rem 0; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -640,7 +662,7 @@ background: rgba(159, 168, 218, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0, 0%, 100%, 0.12); + border-left: 1px solid rgba(255, 255, 255, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -677,6 +699,7 @@ outline-offset: 0; box-shadow: none; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -684,10 +707,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.5rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -695,7 +720,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -730,6 +755,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44435; } + .p-cascadeselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -757,11 +783,11 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { padding: 0.75rem 0.75rem; @@ -769,18 +795,21 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44435; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -788,6 +817,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.75rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -796,12 +826,13 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 18px; height: 18px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -836,27 +867,32 @@ background: #9FA8DA; color: #121212; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; } + .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { background: #9FA8DA; } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9FA8DA; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(255, 255, 255, 0.6); } @@ -873,12 +909,12 @@ .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.87); } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -895,9 +931,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f44435; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -905,25 +943,29 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #2b2b2b; border: 1px solid #1e1e1e; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -964,6 +1006,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f44435; } + .p-dropdown-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -973,7 +1016,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1009,11 +1052,11 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; @@ -1027,87 +1070,114 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f44435; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0, 0%, 100%, 0.3); - border-left: 1px solid hsla(0, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); + border-top: 1px solid rgba(255, 255, 255, 0.3); + border-left: 1px solid rgba(255, 255, 255, 0.3); + border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 0.75rem 0.75rem; min-width: 2.75rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0, 0%, 100%, 0.3); + border-right: 1px solid rgba(255, 255, 255, 0.3); } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.75rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1115,9 +1185,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44435; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1125,18 +1197,20 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.5rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.5rem; } + .p-inputswitch { width: 2.75rem; height: 1rem; } .p-inputswitch .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; } @@ -1158,7 +1232,7 @@ box-shadow: none; } .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); } .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); @@ -1169,9 +1243,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44435; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1179,7 +1255,7 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 0.75rem 0.75rem; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; @@ -1204,72 +1280,87 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f44435; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-listbox .p-listbox-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1322,11 +1413,11 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-listbox.p-focus { outline: 0 none; @@ -1334,12 +1425,14 @@ box-shadow: none; border-color: #9FA8DA; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f44435; } + .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1362,7 +1455,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1376,9 +1469,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1386,6 +1481,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.75rem; } + .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1395,7 +1491,7 @@ } .p-multiselect-panel .p-multiselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1453,11 +1549,11 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1474,21 +1570,25 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f44435; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f44435; } + .p-password-panel { padding: 0.75rem; background: #1e1e1e; @@ -1510,6 +1610,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1517,6 +1618,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1524,12 +1626,13 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); background: #1e1e1e; width: 20px; height: 20px; @@ -1561,14 +1664,16 @@ background: #121212; color: #9FA8DA; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44435; } + .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: rgba(255, 255, 255, 0.06); } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { background: #121212; @@ -1576,9 +1681,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #121212; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1609,6 +1716,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f44435; } + .p-selectbutton .p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); @@ -1616,7 +1724,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1625,7 +1733,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1634,7 +1742,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight:hover { @@ -1643,14 +1751,16 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f44435; } + .p-slider { - background: hsla(0, 0%, 100%, 0.3); + background: rgba(255, 255, 255, 0.3); border: 0 none; border-radius: 4px; } @@ -1700,6 +1810,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #2f2f2f; border: 1px solid rgba(255, 255, 255, 0.12); @@ -1707,7 +1818,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1716,7 +1827,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1725,7 +1836,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight:hover { @@ -1734,15 +1845,17 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f44435; } + .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -1765,7 +1878,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1776,12 +1889,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44435; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -1791,7 +1907,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1841,15 +1957,17 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { - background: hsla(0, 0%, 100%, 0.06); + background: rgba(255, 255, 255, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1857,6 +1975,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.75rem; } + .p-button { color: #121212; background: #9FA8DA; @@ -1968,7 +2087,7 @@ padding: 0.643rem; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1995,426 +2114,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.75rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #121212; background: #F48FB1; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: rgba(244, 143, 177, 0.92); color: #121212; border-color: transparent; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: rgba(244, 143, 177, 0.68); color: #121212; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #F48FB1; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #F48FB1; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #F48FB1; border: 0 none; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #F48FB1; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #F48FB1; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #F48FB1; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #212121; background: #90caf9; border: 0 none; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: rgba(144, 202, 249, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: rgba(144, 202, 249, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(144, 202, 249, 0.04); color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(144, 202, 249, 0.16); color: #90caf9; border: 0 none; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #90caf9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(144, 202, 249, 0.04); border-color: transparent; color: #90caf9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(144, 202, 249, 0.16); border-color: transparent; color: #90caf9; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #212121; background: #c5e1a5; border: 0 none; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: rgba(197, 225, 165, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: rgba(197, 225, 165, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 0 none; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212121; background: #fff59d; border: 0 none; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: rgba(255, 245, 157, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: rgba(255, 245, 157, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 245, 157, 0.04); color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 245, 157, 0.16); color: #fff59d; border: 0 none; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fff59d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 245, 157, 0.04); border-color: transparent; color: #fff59d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 245, 157, 0.16); border-color: transparent; color: #fff59d; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #212121; background: #ce93d8; border: 0 none; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: rgba(206, 147, 216, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: rgba(206, 147, 216, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 0 none; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #212121; background: #ef9a9a; border: 0 none; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: rgba(239, 154, 154, 0.92); color: #212121; border-color: transparent; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: rgba(239, 154, 154, 0.68); color: #212121; border-color: transparent; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 154, 154, 0.04); color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 154, 154, 0.16); color: #ef9a9a; border: 0 none; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef9a9a; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 154, 154, 0.04); border-color: transparent; color: #ef9a9a; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 154, 154, 0.16); border-color: transparent; color: #ef9a9a; } + .p-button.p-button-link { color: #9FA8DA; background: transparent; @@ -2438,6 +2565,7 @@ color: #9FA8DA; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2449,14 +2577,17 @@ width: 2rem; height: 2rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: none; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2467,45 +2598,52 @@ background: rgba(244, 143, 177, 0.92); color: #212121; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.32); } + .p-splitbutton { border-radius: 4px; } @@ -2583,6 +2721,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #F48FB1; @@ -2611,6 +2750,7 @@ border-color: transparent; color: #F48FB1; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #90caf9; @@ -2639,6 +2779,7 @@ border-color: transparent; color: #90caf9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2667,6 +2808,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fff59d; @@ -2695,6 +2837,7 @@ border-color: transparent; color: #fff59d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2723,6 +2866,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ef9a9a; @@ -2751,8 +2895,9 @@ border-color: transparent; color: #ef9a9a; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2763,13 +2908,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2795,6 +2940,7 @@ background: rgba(159, 168, 218, 0.16); color: #9FA8DA; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2888,9 +3034,9 @@ padding: 0.75rem 0.75rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2900,17 +3046,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2940,12 +3086,12 @@ background: #9FA8DA; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1e1e1e; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1e1e1e; } .p-datatable .p-datatable-loading-icon { @@ -3048,6 +3194,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.9375rem 0.9375rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3086,10 +3233,12 @@ .p-dataview .p-dataview-emptymessage { padding: 0.75rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3117,6 +3266,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3136,6 +3286,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-overlay { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -3162,7 +3313,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3170,12 +3321,13 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3184,7 +3336,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3201,6 +3353,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.75rem; } + .p-orderlist .p-orderlist-controls { padding: 0.75rem; } @@ -3258,12 +3411,12 @@ transition: none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; @@ -3277,15 +3430,16 @@ color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list:not(.cdk-drop-list-dragging) .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 0.75rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3294,8 +3448,9 @@ background: #1e1e1e; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3332,6 +3487,7 @@ outline-offset: 0; box-shadow: none; } + .p-paginator { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3341,9 +3497,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3354,9 +3510,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.04); border-color: transparent; color: rgba(255, 255, 255, 0.6); @@ -3413,6 +3569,7 @@ border-color: transparent; color: rgba(255, 255, 255, 0.6); } + .p-picklist .p-picklist-buttons { padding: 0.75rem; } @@ -3470,12 +3627,12 @@ transition: none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; @@ -3489,15 +3646,16 @@ color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list:not(.cdk-drop-list-dragging) .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 0.75rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3506,6 +3664,7 @@ background: #1e1e1e; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3517,19 +3676,20 @@ background-color: #bdbdbd; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -3586,19 +3746,19 @@ color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -3655,7 +3815,7 @@ color: inherit; } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content:focus { @@ -3663,6 +3823,7 @@ outline-offset: 0; box-shadow: none; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3802,7 +3963,7 @@ background: #9FA8DA; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1e1e1e; } .p-treetable .p-treetable-loading-icon { @@ -3863,6 +4024,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.9375rem 0.9375rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3887,6 +4049,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 0 none; @@ -3959,6 +4122,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -3984,6 +4148,7 @@ .p-card .p-card-footer { padding: 0.75rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1e1e1e; } @@ -3992,7 +4157,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0, 0%, 100%, 0.12); + border-top: 1px rgba(255, 255, 255, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4002,11 +4167,12 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0, 0%, 100%, 0.12); + border-left: 1px rgba(255, 255, 255, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -4047,6 +4213,7 @@ .p-fieldset .p-fieldset-content { padding: 0.75rem; } + .p-panel .p-panel-header { border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.75rem; @@ -4113,6 +4280,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; @@ -4123,6 +4291,7 @@ outline-offset: 0; box-shadow: none; } + .p-splitter { border: 1px solid rgba(255, 255, 255, 0.12); background: #1e1e1e; @@ -4131,10 +4300,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0, 0%, 100%, 0.04); + background: rgba(255, 255, 255, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4142,8 +4311,9 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.75rem; } @@ -4212,6 +4382,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4222,6 +4393,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4269,6 +4441,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4341,6 +4514,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4382,6 +4556,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #262626; } + .p-sidebar { background: #262626; color: rgba(255, 255, 255, 0.87); @@ -4392,7 +4567,7 @@ padding: 0.75rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4402,13 +4577,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.6); border-color: transparent; background: rgba(255, 255, 255, 0.04); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -4422,6 +4597,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.75rem; } + .p-tooltip .p-tooltip-text { background: #444444; color: rgba(255, 255, 255, 0.87); @@ -4441,6 +4617,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #444444; } + .p-fileupload .p-fileupload-buttonbar { background: #1e1e1e; padding: 0.75rem; @@ -4480,6 +4657,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: rgba(159, 168, 218, 0.92); color: #121212; @@ -4490,6 +4668,7 @@ color: #121212; border-color: transparent; } + .p-breadcrumb { background: #1e1e1e; border: 1px solid rgba(255, 255, 255, 0.12); @@ -4521,6 +4700,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.5rem 0; background: #2b2b2b; @@ -4568,7 +4748,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4576,13 +4756,13 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4593,11 +4773,11 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -4607,6 +4787,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4630,31 +4811,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4713,7 +4895,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4721,13 +4903,13 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4738,7 +4920,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-megamenu .p-megamenu-panel { @@ -4761,7 +4943,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -4796,9 +4978,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } + .p-menu { padding: 0.5rem 0; background: #1e1e1e; @@ -4835,7 +5018,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4843,13 +5026,13 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4860,7 +5043,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menu.p-menu-overlay { @@ -4878,7 +5061,7 @@ border-top-left-radius: 0; } .p-menu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menu .p-menuitem-badge { @@ -4894,6 +5077,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.75rem; background: #1e1e1e; @@ -4932,7 +5116,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4963,7 +5147,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4971,13 +5155,13 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4988,7 +5172,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-menubar .p-submenu-list { @@ -4999,12 +5183,13 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5036,7 +5221,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5179,7 +5364,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5187,13 +5372,13 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5204,14 +5389,14 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -5244,6 +5429,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5286,7 +5472,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5294,13 +5480,13 @@ } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5311,7 +5497,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-slidemenu.p-slidemenu-overlay { @@ -5326,7 +5512,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-slidemenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -5358,6 +5544,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5394,7 +5581,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); width: 100%; top: 50%; left: 0; @@ -5402,6 +5589,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: solid rgba(255, 255, 255, 0.12); @@ -5472,6 +5660,7 @@ outline-offset: 0; box-shadow: inset none; } + .p-tieredmenu { padding: 0.5rem 0; background: #1e1e1e; @@ -5522,7 +5711,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5530,13 +5719,13 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: rgba(255, 255, 255, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5547,11 +5736,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -5561,6 +5750,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5616,6 +5806,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 0.75rem 0; border-radius: 4px; @@ -5704,6 +5895,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5754,7 +5946,7 @@ color: #01579b; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { @@ -5764,7 +5956,7 @@ color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5774,7 +5966,7 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { @@ -5784,9 +5976,10 @@ color: #b71c1c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #b71c1c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5817,7 +6010,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5874,7 +6067,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -5884,7 +6077,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } @@ -5893,23 +6086,29 @@ outline-offset: 0; box-shadow: none; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5933,8 +6132,9 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: rgba(255, 255, 255, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -5953,9 +6153,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1e1e1e; } + .p-badge { background: #9FA8DA; color: #121212; @@ -5997,8 +6199,9 @@ height: 3rem; line-height: 3rem; } + .p-chip { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 0.75rem; @@ -6032,6 +6235,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -6046,6 +6250,7 @@ outline-offset: 0; box-shadow: none; } + .p-progressbar { border: 0 none; height: 4px; @@ -6061,6 +6266,7 @@ color: #121212; line-height: 4px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6082,6 +6288,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 4px; @@ -6089,6 +6296,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #9FA8DA; color: #121212; @@ -6121,6 +6329,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -6172,15 +6381,17 @@ .p-accordion .p-accordion-tab .p-accordion-header.p-disabled .p-accordion-header-link > * { opacity: 0.38; } + .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-input-filled .p-autocomplete .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6190,13 +6401,13 @@ background-color: transparent; } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6204,9 +6415,11 @@ background-image: none; background: transparent; } + .p-float-label .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding-top: 0; padding-bottom: 0; @@ -6236,18 +6449,21 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-breadcrumb .p-menuitem-link { padding: 0.25rem 0.5rem; } .p-breadcrumb .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-button { font-weight: 500; min-width: 4rem; @@ -6299,98 +6515,105 @@ .p-button.p-button-raised:enabled:focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - .p-button.p-button-secondary:enabled:focus, .p-button-group.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + + .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(244, 143, 177, 0.76); } - .p-button.p-button-secondary:enabled:active, .p-button-group.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { background: rgba(244, 143, 177, 0.68); } - .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-button-group.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { background: rgba(244, 143, 177, 0.12); } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-button-group.p-button-secondary > .p-button.p-button-text:enabled:active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { background: rgba(244, 143, 177, 0.16); } - .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { + .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { background-color: rgba(244, 143, 177, 0.16); } - .p-button.p-button-info:enabled:focus, .p-button-group.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + + .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(144, 202, 249, 0.76); } - .p-button.p-button-info:enabled:active, .p-button-group.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { background: rgba(144, 202, 249, 0.68); } - .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-button-group.p-button-info > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { background: rgba(144, 202, 249, 0.12); } - .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-button-group.p-button-info > .p-button.p-button-text:enabled:active, .p-button-group.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { background: rgba(144, 202, 249, 0.16); } - .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { + .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { background-color: rgba(144, 202, 249, 0.16); } - .p-button.p-button-success:enabled:focus, .p-button-group.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + + .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(197, 225, 165, 0.76); } - .p-button.p-button-success:enabled:active, .p-button-group.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { background: rgba(197, 225, 165, 0.68); } - .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-button-group.p-button-success > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { background: rgba(197, 225, 165, 0.12); } - .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-button-group.p-button-success > .p-button.p-button-text:enabled:active, .p-button-group.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { background: rgba(197, 225, 165, 0.16); } - .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { + .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { background-color: rgba(197, 225, 165, 0.16); } - .p-button.p-button-warning:enabled:focus, .p-button-group.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + + .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(255, 245, 157, 0.76); } - .p-button.p-button-warning:enabled:active, .p-button-group.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { background: rgba(255, 245, 157, 0.68); } - .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-button-group.p-button-warning > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { background: rgba(255, 245, 157, 0.12); } - .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-button-group.p-button-warning > .p-button.p-button-text:enabled:active, .p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { background: rgba(255, 245, 157, 0.16); } - .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { + .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { background-color: rgba(255, 245, 157, 0.16); } - .p-button.p-button-help:enabled:focus, .p-button-group.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + + .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(206, 147, 216, 0.76); } - .p-button.p-button-help:enabled:active, .p-button-group.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { background: rgba(206, 147, 216, 0.68); } - .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-button-group.p-button-help > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { background: rgba(206, 147, 216, 0.12); } - .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-button-group.p-button-help > .p-button.p-button-text:enabled:active, .p-button-group.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { background: rgba(206, 147, 216, 0.16); } - .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { + .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { background-color: rgba(206, 147, 216, 0.16); } - .p-button.p-button-danger:enabled:focus, .p-button-group.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + + .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(239, 154, 154, 0.76); } - .p-button.p-button-danger:enabled:active, .p-button-group.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { background: rgba(239, 154, 154, 0.68); } - .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-button-group.p-button-danger > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { background: rgba(239, 154, 154, 0.12); } - .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-button-group.p-button-danger > .p-button.p-button-text:enabled:active, .p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { background: rgba(239, 154, 154, 0.16); } - .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { + .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { background-color: rgba(239, 154, 154, 0.16); } + .p-calendar-w-btn { - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid rgba(255, 255, 255, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -6435,6 +6658,7 @@ .p-calendar-w-btn.p-calendar-disabled .p-inputtext { opacity: 1; } + .p-datepicker .p-datepicker-header { border-bottom: 0 none; } @@ -6449,7 +6673,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -6460,6 +6684,7 @@ .p-datepicker table td.p-datepicker-today.p-highlight { box-shadow: 0 0 0 1px rgba(159, 168, 218, 0.16); } + p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } @@ -6472,12 +6697,13 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled .p-calendar-w-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6487,13 +6713,13 @@ background-color: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-calendar-disabled):not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6527,6 +6753,7 @@ border: 0 none; background-image: none; } + .p-cascadeselect .p-inputtext, .p-cascadeselect .p-cascadeselect-trigger { background-image: none; background: transparent; @@ -6537,15 +6764,17 @@ .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-cascadeselect-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } + .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6555,13 +6784,13 @@ background-color: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6587,6 +6816,7 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + .p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -6606,27 +6836,30 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #F48FB1; color: #121212; } + .p-checkbox { border-radius: 50%; transition: box-shadow 0.2s; } .p-checkbox .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); border-radius: 2px; position: relative; } .p-checkbox .p-checkbox-box:not(.p-disabled):hover { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); } .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: rgba(255, 255, 255, 0.7); } .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -6654,12 +6887,14 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #1e1e1e; } .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { background-color: #1e1e1e; } + @keyframes checkbox-check { 0% { width: 0; @@ -6682,12 +6917,13 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6697,13 +6933,13 @@ background-color: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6711,9 +6947,11 @@ background-image: none; background: transparent; } + .p-float-label .p-chips-multiple-container .p-chips-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-token { padding-top: 0; padding-bottom: 0; @@ -6735,9 +6973,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-datatable .p-sortable-column { outline: 0 none; } @@ -6750,12 +6990,14 @@ .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus { background-color: rgba(255, 255, 255, 0.03); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #9FA8DA; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #9FA8DA; } + .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; @@ -6766,15 +7008,17 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-dropdown-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } + .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6784,13 +7028,13 @@ background-color: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6812,9 +7056,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-galleria .p-galleria-indicators { padding: 1rem; } @@ -6826,30 +7072,32 @@ background: rgba(244, 143, 177, 0.68); color: #121212; } + .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } .p-inputtext:enabled:focus.ng-invalid.ng-dirty { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled .p-inputtext { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -6861,12 +7109,13 @@ box-shadow: none; border-color: transparent; } + .p-input-filled .p-inputgroup .p-inputgroup-addon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -6875,24 +7124,26 @@ border-right-color: transparent; } .p-input-filled .p-inputgroup-addon:first-child, - .p-input-filled .p-inputgroup button:first-child, - .p-input-filled .p-inputgroup input:first-child { +.p-input-filled .p-inputgroup button:first-child, +.p-input-filled .p-inputgroup input:first-child { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:first-child input { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup-addon:last-child, - .p-input-filled .p-inputgroup button:last-child, - .p-input-filled .p-inputgroup input:last-child { +.p-input-filled .p-inputgroup button:last-child, +.p-input-filled .p-inputgroup input:last-child { border-bottom-right-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:last-child input { border-bottom-right-radius: 0; } + p-inputmask.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled p-inputmask.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); @@ -6901,9 +7152,11 @@ box-shadow: none; border-color: transparent; } + p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-input-filled p-inputnumber.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); @@ -6912,6 +7165,7 @@ box-shadow: none; border-color: transparent; } + .p-inputswitch .p-inputswitch-slider:before { transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); @@ -6928,45 +7182,51 @@ .p-inputswitch.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12); } + .p-fieldset .p-fieldset-legend { border: 0 none; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { background: rgba(255, 255, 255, 0.12); } + .p-float-label input:focus ~ label, - .p-float-label input.p-filled ~ label, - .p-float-label textarea:focus ~ label, - .p-float-label textarea.p-filled ~ label, - .p-float-label .p-inputwrapper-focus ~ label, - .p-float-label .p-inputwrapper-filled ~ label { +.p-float-label input.p-filled ~ label, +.p-float-label textarea:focus ~ label, +.p-float-label textarea.p-filled ~ label, +.p-float-label .p-inputwrapper-focus ~ label, +.p-float-label .p-inputwrapper-filled ~ label { top: -0.5rem !important; background-color: #1e1e1e; padding: 2px 4px; margin-left: -4px; margin-top: 0; } + .p-float-label textarea ~ label { margin-top: 0; } + .p-float-label input:focus ~ label, - .p-float-label .p-inputwrapper-focus ~ label { +.p-float-label .p-inputwrapper-focus ~ label { color: #9FA8DA; } + .p-input-filled .p-float-label .p-inputtext { padding-top: 1.25rem; padding-bottom: 0.25rem; } .p-input-filled .p-float-label input:focus ~ label, - .p-input-filled .p-float-label input.p-filled ~ label, - .p-input-filled .p-float-label textarea:focus ~ label, - .p-input-filled .p-float-label textarea.p-filled ~ label, - .p-input-filled .p-float-label .p-inputwrapper-focus ~ label, - .p-input-filled .p-float-label .p-inputwrapper-filled ~ label { +.p-input-filled .p-float-label input.p-filled ~ label, +.p-input-filled .p-float-label textarea:focus ~ label, +.p-input-filled .p-float-label textarea.p-filled ~ label, +.p-input-filled .p-float-label .p-inputwrapper-focus ~ label, +.p-input-filled .p-float-label .p-inputwrapper-filled ~ label { top: 0.25rem !important; margin-top: 0; background: transparent; } + .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } @@ -6976,21 +7236,25 @@ .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-menu .p-menuitem .p-menuitem-link:focus { background: rgba(255, 255, 255, 0.12); } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -7001,6 +7265,7 @@ .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } @@ -7013,12 +7278,13 @@ .p-multiselect-panel .p-multiselect-close:focus { background: rgba(255, 255, 255, 0.12); } + .p-input-filled .p-multiselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7028,13 +7294,13 @@ background-color: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7046,11 +7312,13 @@ background-image: none; background: transparent; } + .p-float-label .p-multiselect-label .p-multiselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-multiselect .p-multiselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -7079,18 +7347,22 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-orderlist .p-orderlist-list .p-orderlist-item:focus { background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } + .p-paginator { justify-content: flex-end; } @@ -7100,13 +7372,14 @@ .p-paginator .p-paginator-element:focus.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-panel { border-radius: 4px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); } .p-panel .p-panel-header, - .p-panel .p-panel-content, - .p-panel .p-panel-footer { +.p-panel .p-panel-content, +.p-panel .p-panel-footer { border: 0 none; } .p-panel .p-panel-content { @@ -7118,6 +7391,7 @@ .p-panel .p-panel-header-icon:focus { background: rgba(255, 255, 255, 0.12); } + .p-panelmenu .p-panelmenu-panel { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; @@ -7153,27 +7427,30 @@ .p-panelmenu .p-panelmenu-panel .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item:focus { background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-progressbar { border-radius: 0; } .p-progressbar .p-progressbar-label { display: none !important; } + .p-radiobutton { border-radius: 50%; transition: box-shadow 0.2s; } .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid rgba(255, 255, 255, 0.7); } .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus { border-color: #9FA8DA; @@ -7190,12 +7467,14 @@ .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #1e1e1e; } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #1e1e1e; } + .p-rating { gap: 0; } @@ -7217,6 +7496,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item { background: rgba(244, 68, 53, 0.04); } + .p-selectbutton .p-button:focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); @@ -7225,12 +7505,14 @@ background: #262626; border-color: rgba(255, 255, 255, 0.12); } + .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-slider .p-slider-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); @@ -7241,6 +7523,7 @@ .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } + .p-steps { padding: 1rem 0; } @@ -7293,6 +7576,7 @@ .p-steps .p-steps-item.p-disabled { opacity: 1; } + .p-tabview .p-tabview-nav { position: relative; } @@ -7315,9 +7599,11 @@ background-color: #9FA8DA; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-toolbar { border: 0 none; } + .p-tooltip .p-tooltip-text { box-shadow: none; font-size: 0.875rem; @@ -7325,12 +7611,14 @@ .p-tooltip .p-tooltip-arrow { display: none; } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(255, 255, 255, 0.12); } + .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; @@ -7341,15 +7629,17 @@ .p-treeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-treeselect-item .p-ink { background-color: rgba(159, 168, 218, 0.16); } + .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: rgba(255, 255, 255, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7359,13 +7649,13 @@ background-color: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: rgba(255, 255, 255, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7377,11 +7667,13 @@ background-image: none; background: transparent; } + .p-float-label .p-treeselect-label .p-treeselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-treeselect .p-treeselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -7410,9 +7702,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435); } + .p-treeselect.p-invalid:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435; } + .p-tree .p-tree-container .p-treenode { outline: 0 none; } @@ -7422,6 +7716,7 @@ .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(159, 168, 218, 0.24); } + .p-treetable .p-sortable-column { outline: 0 none; } @@ -7434,6 +7729,7 @@ .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus { background-color: rgba(255, 255, 255, 0.03); } + .p-tabmenu .p-tabmenu-nav { position: relative; } @@ -7458,12 +7754,14 @@ background-color: #9FA8DA; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { margin: 0.5rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { margin: 0 0.5rem; } + .p-togglebutton.p-button:focus { background: #1c1c1c; border-color: rgba(255, 255, 255, 0.12); @@ -7472,6 +7770,7 @@ background: #262626; border-color: rgba(255, 255, 255, 0.12); } + .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(159, 168, 218, 0.12); } @@ -7503,45 +7802,53 @@ .p-splitbutton.p-button-raised > .p-button:not(:disabled):focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(244, 143, 177, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { background: rgba(244, 143, 177, 0.16); } + .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(144, 202, 249, 0.12); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active { background: rgba(144, 202, 249, 0.16); } + .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(197, 225, 165, 0.12); } .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active { background: rgba(197, 225, 165, 0.16); } + .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(255, 245, 157, 0.12); } .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active { background: rgba(255, 245, 157, 0.16); } + .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(206, 147, 216, 0.12); } .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active { background: rgba(206, 147, 216, 0.16); } + .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(239, 154, 154, 0.12); } .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(239, 154, 154, 0.16); } + .p-scrollpanel .p-scrollpanel-bar:focus { box-shadow: 0 0 1px 4px rgba(244, 143, 177, 0.2); } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css index e4cc5dfc91a..3a7f9852f0f 100644 --- a/src/assets/components/themes/mdc-light-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css @@ -54,21 +54,24 @@ font-family: "Roboto"; font-style: normal; font-weight: 400; - src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; - src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; - src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f4fafe; @@ -296,32 +299,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.32); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.38; } + .p-error { color: #b00020; } + .p-text-secondary { color: rgba(0, 0, 0, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -333,12 +344,15 @@ outline-offset: 0; 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; @@ -355,6 +369,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -401,6 +416,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .p-autocomplete-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -447,9 +463,11 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #b00020; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -457,19 +475,23 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(0, 0, 0, 0.6); right: 3.5rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #b00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #673AB7; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -496,7 +518,7 @@ border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -506,13 +528,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -521,14 +543,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 500; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #673AB7; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -567,7 +589,7 @@ .p-datepicker table td.p-datepicker-today > span { background: #ffffff; color: rgba(0, 0, 0, 0.87); - border-color: rgb(0, 0, 0); + border-color: black; } .p-datepicker table td.p-datepicker-today > span.p-highlight { color: #673AB7; @@ -677,6 +699,7 @@ outline-offset: 0; box-shadow: none; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -684,10 +707,12 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(0, 0, 0, 0.6); right: 3.5rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -730,6 +755,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #b00020; } + .p-cascadeselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -769,6 +795,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f5f5f5; } @@ -778,9 +805,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #b00020; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -788,6 +817,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.75rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -796,6 +826,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 18px; height: 18px; @@ -836,9 +867,11 @@ background: #673AB7; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } @@ -851,12 +884,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #673AB7; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(0, 0, 0, 0.87); } @@ -895,9 +931,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #b00020; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -905,22 +943,26 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -964,6 +1006,7 @@ .p-dropdown.p-invalid.p-component { border-color: #b00020; } + .p-dropdown-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1027,6 +1070,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #f5f5f5; } @@ -1039,9 +1083,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #b00020; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1054,60 +1106,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid rgba(0, 0, 0, 0.38); } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.75rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(0, 0, 0, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(0, 0, 0, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #b00020; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1115,9 +1185,11 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #b00020; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1125,12 +1197,14 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.5rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.5rem; } + .p-inputswitch { width: 2.75rem; height: 1rem; @@ -1169,9 +1243,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(103, 58, 183, 0.5); } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #b00020; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1204,45 +1280,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(0, 0, 0, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #b00020; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(0, 0, 0, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(0, 0, 0, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.6); } + :-moz-placeholder { color: rgba(0, 0, 0, 0.6); } + ::-moz-placeholder { color: rgba(0, 0, 0, 0.6); } + :-ms-input-placeholder { color: rgba(0, 0, 0, 0.6); } + .p-input-filled .p-inputtext { background-color: #f5f5f5; } @@ -1252,14 +1340,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #dcdcdc; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1334,9 +1425,11 @@ box-shadow: none; border-color: #673AB7; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #b00020; } + .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1376,9 +1469,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1386,6 +1481,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.75rem; } + .p-multiselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1474,6 +1570,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #f5f5f5; } @@ -1483,12 +1580,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #b00020; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #b00020; } + .p-password-panel { padding: 0.75rem; background: #ffffff; @@ -1510,6 +1610,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1517,6 +1618,7 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1524,6 +1626,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1561,9 +1664,11 @@ background: #ffffff; color: #673AB7; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #b00020; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f5f5f5; } @@ -1576,9 +1681,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1609,6 +1716,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b00020; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); @@ -1616,7 +1724,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1625,7 +1733,7 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1634,7 +1742,7 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button.p-highlight:hover { @@ -1643,12 +1751,14 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #b00020; } + .p-slider { background: #c1c1c1; border: 0 none; @@ -1700,6 +1810,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); @@ -1707,7 +1818,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1716,7 +1827,7 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1725,7 +1836,7 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button.p-highlight:hover { @@ -1734,12 +1845,14 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #b00020; } + .p-treeselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1776,12 +1889,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #b00020; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1841,6 +1957,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #f5f5f5; } @@ -1850,6 +1967,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1857,6 +1975,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.75rem; } + .p-button { color: #ffffff; background: #673AB7; @@ -1968,7 +2087,7 @@ padding: 0.643rem; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1995,426 +2114,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.75rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #4CAF50; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: rgba(76, 175, 80, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: rgba(76, 175, 80, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(76, 175, 80, 0.04); color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(76, 175, 80, 0.16); color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #4CAF50; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(76, 175, 80, 0.04); border-color: transparent; color: #4CAF50; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(76, 175, 80, 0.16); border-color: transparent; color: #4CAF50; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #2196f3; border: 0 none; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: rgba(33, 150, 243, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: rgba(33, 150, 243, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(33, 150, 243, 0.04); color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(33, 150, 243, 0.16); color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #2196f3; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(33, 150, 243, 0.04); border-color: transparent; color: #2196f3; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(33, 150, 243, 0.16); border-color: transparent; color: #2196f3; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689f38; border: 0 none; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: rgba(104, 159, 56, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: rgba(104, 159, 56, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(104, 159, 56, 0.16); color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #689f38; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689f38; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689f38; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #fbc02d; border: 0 none; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: rgba(251, 192, 45, 0.92); color: #212529; border-color: transparent; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: rgba(251, 192, 45, 0.68); color: #212529; border-color: transparent; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 192, 45, 0.16); color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fbc02d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #fbc02d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #fbc02d; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 0 none; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: rgba(156, 39, 176, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: rgba(156, 39, 176, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d32f2f; border: 0 none; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: rgba(211, 47, 47, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: rgba(211, 47, 47, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(211, 47, 47, 0.16); color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d32f2f; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #d32f2f; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #d32f2f; } + .p-button.p-button-link { color: #673AB7; background: transparent; @@ -2438,6 +2565,7 @@ color: #673AB7; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2449,14 +2577,17 @@ width: 2rem; height: 2rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: none; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2467,45 +2598,52 @@ background: rgba(76, 175, 80, 0.92); color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.32); } + .p-splitbutton { border-radius: 4px; } @@ -2583,6 +2721,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #4CAF50; @@ -2611,6 +2750,7 @@ border-color: transparent; color: #4CAF50; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #2196f3; @@ -2639,6 +2779,7 @@ border-color: transparent; color: #2196f3; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #689f38; @@ -2667,6 +2808,7 @@ border-color: transparent; color: #689f38; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fbc02d; @@ -2695,6 +2837,7 @@ border-color: transparent; color: #fbc02d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2723,6 +2866,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d32f2f; @@ -2751,8 +2895,9 @@ border-color: transparent; color: #d32f2f; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -2763,13 +2908,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2795,6 +2940,7 @@ background: rgba(103, 58, 183, 0.12); color: #673AB7; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2888,9 +3034,9 @@ padding: 0.75rem 0.75rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -2900,17 +3046,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2940,12 +3086,12 @@ background: #673AB7; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #ffffff; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #ffffff; } .p-datatable .p-datatable-loading-icon { @@ -3048,6 +3194,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.9375rem 0.9375rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3086,10 +3233,12 @@ .p-dataview .p-dataview-emptymessage { padding: 0.75rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3117,6 +3266,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3136,6 +3286,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-overlay { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3173,6 +3324,7 @@ border-top: 1px solid rgba(0, 0, 0, 0.12); margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12); @@ -3201,6 +3353,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.75rem; } + .p-orderlist .p-orderlist-controls { padding: 0.75rem; } @@ -3286,6 +3439,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(0, 0, 0, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 0.75rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3294,6 +3448,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); @@ -3332,6 +3487,7 @@ outline-offset: 0; box-shadow: none; } + .p-paginator { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3341,9 +3497,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(0, 0, 0, 0.6); @@ -3354,9 +3510,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); border-color: transparent; color: rgba(0, 0, 0, 0.6); @@ -3413,6 +3569,7 @@ border-color: transparent; color: rgba(0, 0, 0, 0.6); } + .p-picklist .p-picklist-buttons { padding: 0.75rem; } @@ -3498,6 +3655,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(0, 0, 0, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 0.75rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3506,6 +3664,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3517,19 +3676,20 @@ background-color: #bdbdbd; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e0e0e0; background: #ffffff; @@ -3586,11 +3746,11 @@ color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3663,6 +3823,7 @@ outline-offset: 0; box-shadow: none; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3802,7 +3963,7 @@ background: #673AB7; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #ffffff; } .p-treetable .p-treetable-loading-icon { @@ -3863,6 +4024,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.9375rem 0.9375rem; } + .p-virtualscroller .p-virtualscroller-header { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3887,6 +4049,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 0 none; @@ -3959,6 +4122,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3984,6 +4148,7 @@ .p-card .p-card-footer { padding: 0.75rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -4007,6 +4172,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e0e0e0; background: #ffffff; @@ -4047,6 +4213,7 @@ .p-fieldset .p-fieldset-content { padding: 0.75rem; } + .p-panel .p-panel-header { border: 1px solid #e0e0e0; padding: 0.75rem; @@ -4113,6 +4280,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; @@ -4123,6 +4291,7 @@ outline-offset: 0; box-shadow: none; } + .p-splitter { border: 1px solid #e0e0e0; background: #ffffff; @@ -4144,6 +4313,7 @@ .p-splitter .p-splitter-gutter-resizing { background: rgba(0, 0, 0, 0.12); } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.75rem; } @@ -4212,6 +4382,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #ffffff; border: 1px solid #e0e0e0; @@ -4222,6 +4393,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4269,6 +4441,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4341,6 +4514,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4382,6 +4556,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4392,7 +4567,7 @@ padding: 0.75rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -4402,13 +4577,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -4422,6 +4597,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.75rem; } + .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); color: #ffffff; @@ -4441,6 +4617,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: rgba(97, 97, 97, 0.9); } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 0.75rem; @@ -4480,6 +4657,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: rgba(103, 58, 183, 0.92); color: #ffffff; @@ -4490,6 +4668,7 @@ color: #ffffff; border-color: transparent; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e5e5; @@ -4521,6 +4700,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(0, 0, 0, 0.6); } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4568,7 +4748,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4582,7 +4762,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4593,7 +4773,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-contextmenu .p-menuitem-separator { @@ -4607,6 +4787,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4630,31 +4811,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4713,7 +4895,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4727,7 +4909,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4738,7 +4920,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-megamenu .p-megamenu-panel { @@ -4796,9 +4978,10 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4835,7 +5018,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4849,7 +5032,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4860,7 +5043,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menu.p-menu-overlay { @@ -4894,6 +5077,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.75rem; background: transparent; @@ -4932,7 +5116,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4963,7 +5147,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4977,7 +5161,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4988,7 +5172,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-submenu-list { @@ -5005,6 +5189,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5179,7 +5364,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5193,7 +5378,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5204,7 +5389,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5244,6 +5429,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5286,7 +5472,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5300,7 +5486,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5311,7 +5497,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-slidemenu.p-slidemenu-overlay { @@ -5358,6 +5544,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5402,6 +5589,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -5472,6 +5660,7 @@ outline-offset: 0; box-shadow: inset none; } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5522,7 +5711,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5536,7 +5725,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5547,7 +5736,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-tieredmenu .p-menuitem-separator { @@ -5561,6 +5750,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5616,6 +5806,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 0.75rem 0; border-radius: 4px; @@ -5704,6 +5895,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5754,7 +5946,7 @@ color: #01579b; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { @@ -5764,7 +5956,7 @@ color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5774,7 +5966,7 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { @@ -5784,9 +5976,10 @@ color: #b71c1c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #b71c1c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5817,7 +6010,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5874,7 +6067,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -5884,7 +6077,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } @@ -5893,23 +6086,29 @@ outline-offset: 0; box-shadow: none; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5933,6 +6132,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: rgba(0, 0, 0, 0.12); border-radius: 4px; @@ -5953,9 +6153,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #673AB7; color: #ffffff; @@ -5997,6 +6199,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); @@ -6032,6 +6235,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -6046,6 +6250,7 @@ outline-offset: 0; box-shadow: none; } + .p-progressbar { border: 0 none; height: 4px; @@ -6061,6 +6266,7 @@ color: #ffffff; line-height: 4px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6082,6 +6288,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(0, 0, 0, 0.08); border-radius: 4px; @@ -6089,6 +6296,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #673AB7; color: #ffffff; @@ -6121,6 +6329,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -6172,9 +6381,11 @@ .p-accordion .p-accordion-tab .p-accordion-header.p-disabled .p-accordion-header-link > * { opacity: 0.38; } + .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-input-filled .p-autocomplete .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6204,9 +6415,11 @@ background-image: none; background: transparent; } + .p-float-label .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding-top: 0; padding-bottom: 0; @@ -6236,18 +6449,21 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-breadcrumb .p-menuitem-link { padding: 0.25rem 0.5rem; } .p-breadcrumb .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-button { font-weight: 500; min-width: 4rem; @@ -6299,96 +6515,103 @@ .p-button.p-button-raised:enabled:focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - .p-button.p-button-secondary:enabled:focus, .p-button-group.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + + .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(76, 175, 80, 0.76); } - .p-button.p-button-secondary:enabled:active, .p-button-group.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { background: rgba(76, 175, 80, 0.68); } - .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-button-group.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { background: rgba(76, 175, 80, 0.12); } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-button-group.p-button-secondary > .p-button.p-button-text:enabled:active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { background: rgba(76, 175, 80, 0.16); } - .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { + .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { background-color: rgba(76, 175, 80, 0.16); } - .p-button.p-button-info:enabled:focus, .p-button-group.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + + .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(33, 150, 243, 0.76); } - .p-button.p-button-info:enabled:active, .p-button-group.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { background: rgba(33, 150, 243, 0.68); } - .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-button-group.p-button-info > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { background: rgba(33, 150, 243, 0.12); } - .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-button-group.p-button-info > .p-button.p-button-text:enabled:active, .p-button-group.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { background: rgba(33, 150, 243, 0.16); } - .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { + .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { background-color: rgba(33, 150, 243, 0.16); } - .p-button.p-button-success:enabled:focus, .p-button-group.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + + .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(104, 159, 56, 0.76); } - .p-button.p-button-success:enabled:active, .p-button-group.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { background: rgba(104, 159, 56, 0.68); } - .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-button-group.p-button-success > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { background: rgba(104, 159, 56, 0.12); } - .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-button-group.p-button-success > .p-button.p-button-text:enabled:active, .p-button-group.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { background: rgba(104, 159, 56, 0.16); } - .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { + .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { background-color: rgba(104, 159, 56, 0.16); } - .p-button.p-button-warning:enabled:focus, .p-button-group.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + + .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(251, 192, 45, 0.76); } - .p-button.p-button-warning:enabled:active, .p-button-group.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { background: rgba(251, 192, 45, 0.68); } - .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-button-group.p-button-warning > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { background: rgba(251, 192, 45, 0.12); } - .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-button-group.p-button-warning > .p-button.p-button-text:enabled:active, .p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { background: rgba(251, 192, 45, 0.16); } - .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { + .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { background-color: rgba(251, 192, 45, 0.16); } - .p-button.p-button-help:enabled:focus, .p-button-group.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + + .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(156, 39, 176, 0.76); } - .p-button.p-button-help:enabled:active, .p-button-group.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { background: rgba(156, 39, 176, 0.68); } - .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-button-group.p-button-help > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { background: rgba(156, 39, 176, 0.12); } - .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-button-group.p-button-help > .p-button.p-button-text:enabled:active, .p-button-group.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { background: rgba(156, 39, 176, 0.16); } - .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { + .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { background-color: rgba(156, 39, 176, 0.16); } - .p-button.p-button-danger:enabled:focus, .p-button-group.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + + .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(211, 47, 47, 0.76); } - .p-button.p-button-danger:enabled:active, .p-button-group.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { background: rgba(211, 47, 47, 0.68); } - .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-button-group.p-button-danger > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { background: rgba(211, 47, 47, 0.12); } - .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-button-group.p-button-danger > .p-button.p-button-text:enabled:active, .p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { background: rgba(211, 47, 47, 0.16); } - .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { + .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } + .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; @@ -6435,6 +6658,7 @@ .p-calendar-w-btn.p-calendar-disabled .p-inputtext { opacity: 1; } + .p-datepicker .p-datepicker-header { border-bottom: 0 none; } @@ -6460,6 +6684,7 @@ .p-datepicker table td.p-datepicker-today.p-highlight { box-shadow: 0 0 0 1px rgba(103, 58, 183, 0.12); } + p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } @@ -6472,6 +6697,7 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled .p-calendar-w-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6527,6 +6753,7 @@ border: 0 none; background-image: none; } + .p-cascadeselect .p-inputtext, .p-cascadeselect .p-cascadeselect-trigger { background-image: none; background: transparent; @@ -6537,9 +6764,11 @@ .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-cascadeselect-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } + .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6587,6 +6816,7 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + .p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -6606,13 +6836,16 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #4CAF50; color: #ffffff; } + .p-checkbox { border-radius: 50%; transition: box-shadow 0.2s; @@ -6654,12 +6887,14 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12); } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #ffffff; } .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { background-color: #ffffff; } + @keyframes checkbox-check { 0% { width: 0; @@ -6682,6 +6917,7 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6711,9 +6947,11 @@ background-image: none; background: transparent; } + .p-float-label .p-chips-multiple-container .p-chips-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-token { padding-top: 0; padding-bottom: 0; @@ -6735,9 +6973,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-datatable .p-sortable-column { outline: 0 none; } @@ -6750,12 +6990,14 @@ .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus { background-color: rgba(0, 0, 0, 0.03); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #673AB7; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #673AB7; } + .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; @@ -6766,9 +7008,11 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-dropdown-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } + .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6812,9 +7056,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-galleria .p-galleria-indicators { padding: 1rem; } @@ -6826,12 +7072,14 @@ background: rgba(76, 175, 80, 0.68); color: #ffffff; } + .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-inputtext:enabled:focus.ng-invalid.ng-dirty { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled .p-inputtext { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6861,6 +7109,7 @@ box-shadow: none; border-color: transparent; } + .p-input-filled .p-inputgroup .p-inputgroup-addon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6875,24 +7124,26 @@ border-right-color: transparent; } .p-input-filled .p-inputgroup-addon:first-child, - .p-input-filled .p-inputgroup button:first-child, - .p-input-filled .p-inputgroup input:first-child { +.p-input-filled .p-inputgroup button:first-child, +.p-input-filled .p-inputgroup input:first-child { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:first-child input { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup-addon:last-child, - .p-input-filled .p-inputgroup button:last-child, - .p-input-filled .p-inputgroup input:last-child { +.p-input-filled .p-inputgroup button:last-child, +.p-input-filled .p-inputgroup input:last-child { border-bottom-right-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:last-child input { border-bottom-right-radius: 0; } + p-inputmask.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled p-inputmask.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); @@ -6901,9 +7152,11 @@ box-shadow: none; border-color: transparent; } + p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled p-inputnumber.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); @@ -6912,6 +7165,7 @@ box-shadow: none; border-color: transparent; } + .p-inputswitch .p-inputswitch-slider:before { transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); @@ -6928,45 +7182,51 @@ .p-inputswitch.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-fieldset .p-fieldset-legend { border: 0 none; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { background: rgba(0, 0, 0, 0.12); } + .p-float-label input:focus ~ label, - .p-float-label input.p-filled ~ label, - .p-float-label textarea:focus ~ label, - .p-float-label textarea.p-filled ~ label, - .p-float-label .p-inputwrapper-focus ~ label, - .p-float-label .p-inputwrapper-filled ~ label { +.p-float-label input.p-filled ~ label, +.p-float-label textarea:focus ~ label, +.p-float-label textarea.p-filled ~ label, +.p-float-label .p-inputwrapper-focus ~ label, +.p-float-label .p-inputwrapper-filled ~ label { top: -0.5rem !important; background-color: #ffffff; padding: 2px 4px; margin-left: -4px; margin-top: 0; } + .p-float-label textarea ~ label { margin-top: 0; } + .p-float-label input:focus ~ label, - .p-float-label .p-inputwrapper-focus ~ label { +.p-float-label .p-inputwrapper-focus ~ label { color: #673AB7; } + .p-input-filled .p-float-label .p-inputtext { padding-top: 1.25rem; padding-bottom: 0.25rem; } .p-input-filled .p-float-label input:focus ~ label, - .p-input-filled .p-float-label input.p-filled ~ label, - .p-input-filled .p-float-label textarea:focus ~ label, - .p-input-filled .p-float-label textarea.p-filled ~ label, - .p-input-filled .p-float-label .p-inputwrapper-focus ~ label, - .p-input-filled .p-float-label .p-inputwrapper-filled ~ label { +.p-input-filled .p-float-label input.p-filled ~ label, +.p-input-filled .p-float-label textarea:focus ~ label, +.p-input-filled .p-float-label textarea.p-filled ~ label, +.p-input-filled .p-float-label .p-inputwrapper-focus ~ label, +.p-input-filled .p-float-label .p-inputwrapper-filled ~ label { top: 0.25rem !important; margin-top: 0; background: transparent; } + .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } @@ -6976,21 +7236,25 @@ .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-menu .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -7001,6 +7265,7 @@ .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } @@ -7013,6 +7278,7 @@ .p-multiselect-panel .p-multiselect-close:focus { background: rgba(0, 0, 0, 0.12); } + .p-input-filled .p-multiselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -7046,11 +7312,13 @@ background-image: none; background: transparent; } + .p-float-label .p-multiselect-label .p-multiselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-multiselect .p-multiselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -7079,18 +7347,22 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-orderlist .p-orderlist-list .p-orderlist-item:focus { background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } + .p-paginator { justify-content: flex-end; } @@ -7100,13 +7372,14 @@ .p-paginator .p-paginator-element:focus.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-panel { border-radius: 4px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); } .p-panel .p-panel-header, - .p-panel .p-panel-content, - .p-panel .p-panel-footer { +.p-panel .p-panel-content, +.p-panel .p-panel-footer { border: 0 none; } .p-panel .p-panel-content { @@ -7118,6 +7391,7 @@ .p-panel .p-panel-header-icon:focus { background: rgba(0, 0, 0, 0.12); } + .p-panelmenu .p-panelmenu-panel { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; @@ -7153,18 +7427,21 @@ .p-panelmenu .p-panelmenu-panel .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item:focus { background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-progressbar { border-radius: 0; } .p-progressbar .p-progressbar-label { display: none !important; } + .p-radiobutton { border-radius: 50%; transition: box-shadow 0.2s; @@ -7190,12 +7467,14 @@ .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12); } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #ffffff; } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #ffffff; } + .p-rating { gap: 0; } @@ -7217,6 +7496,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item { background: rgba(176, 0, 32, 0.04); } + .p-selectbutton .p-button:focus { background: #e0e0e1; border-color: #e0e0e1; @@ -7225,12 +7505,14 @@ background: #d9d8d9; border-color: #d9d8d9; } + .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-slider .p-slider-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); @@ -7241,6 +7523,7 @@ .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } + .p-steps { padding: 1rem 0; } @@ -7293,6 +7576,7 @@ .p-steps .p-steps-item.p-disabled { opacity: 1; } + .p-tabview .p-tabview-nav { position: relative; } @@ -7315,9 +7599,11 @@ background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-toolbar { border: 0 none; } + .p-tooltip .p-tooltip-text { box-shadow: none; font-size: 0.875rem; @@ -7325,12 +7611,14 @@ .p-tooltip .p-tooltip-arrow { display: none; } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; @@ -7341,9 +7629,11 @@ .p-treeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-treeselect-item .p-ink { background-color: rgba(103, 58, 183, 0.16); } + .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -7377,11 +7667,13 @@ background-image: none; background: transparent; } + .p-float-label .p-treeselect-label .p-treeselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-treeselect .p-treeselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -7410,9 +7702,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + .p-treeselect.p-invalid:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-tree .p-tree-container .p-treenode { outline: 0 none; } @@ -7422,6 +7716,7 @@ .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(103, 58, 183, 0.24); } + .p-treetable .p-sortable-column { outline: 0 none; } @@ -7434,6 +7729,7 @@ .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus { background-color: rgba(0, 0, 0, 0.03); } + .p-tabmenu .p-tabmenu-nav { position: relative; } @@ -7458,12 +7754,14 @@ background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { margin: 0.5rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { margin: 0 0.5rem; } + .p-togglebutton.p-button:focus { background: #e0e0e1; border-color: #e0e0e1; @@ -7472,6 +7770,7 @@ background: #d9d8d9; border-color: #d9d8d9; } + .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(103, 58, 183, 0.12); } @@ -7503,45 +7802,53 @@ .p-splitbutton.p-button-raised > .p-button:not(:disabled):focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(76, 175, 80, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { background: rgba(76, 175, 80, 0.16); } + .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(33, 150, 243, 0.12); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active { background: rgba(33, 150, 243, 0.16); } + .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(104, 159, 56, 0.12); } .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active { background: rgba(104, 159, 56, 0.16); } + .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(251, 192, 45, 0.12); } .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active { background: rgba(251, 192, 45, 0.16); } + .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(156, 39, 176, 0.12); } .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active { background: rgba(156, 39, 176, 0.16); } + .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(211, 47, 47, 0.12); } .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(211, 47, 47, 0.16); } + .p-scrollpanel .p-scrollpanel-bar:focus { box-shadow: 0 0 1px 4px rgba(76, 175, 80, 0.2); } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css index b8d9e49e8d8..5334d2c8039 100644 --- a/src/assets/components/themes/mdc-light-indigo/theme.css +++ b/src/assets/components/themes/mdc-light-indigo/theme.css @@ -54,21 +54,24 @@ font-family: "Roboto"; font-style: normal; font-weight: 400; - src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; - src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-700 - latin-ext_latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; - src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f4fafe; @@ -296,32 +299,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.32); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.38; } + .p-error { color: #b00020; } + .p-text-secondary { color: rgba(0, 0, 0, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -333,12 +344,15 @@ outline-offset: 0; 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; @@ -355,6 +369,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -401,6 +416,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #b00020; } + .p-autocomplete-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -447,9 +463,11 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #b00020; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -457,19 +475,23 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(0, 0, 0, 0.6); right: 3.5rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #b00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: none; border-color: #3F51B5; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -496,7 +518,7 @@ border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -506,13 +528,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -521,14 +543,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(0, 0, 0, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 500; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #3F51B5; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -567,7 +589,7 @@ .p-datepicker table td.p-datepicker-today > span { background: #ffffff; color: rgba(0, 0, 0, 0.87); - border-color: rgb(0, 0, 0); + border-color: black; } .p-datepicker table td.p-datepicker-today > span.p-highlight { color: #3F51B5; @@ -677,6 +699,7 @@ outline-offset: 0; box-shadow: none; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -684,10 +707,12 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(0, 0, 0, 0.6); right: 3.5rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -730,6 +755,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #b00020; } + .p-cascadeselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -769,6 +795,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f5f5f5; } @@ -778,9 +805,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #b00020; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -788,6 +817,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.75rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -796,6 +826,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 18px; height: 18px; @@ -836,9 +867,11 @@ background: #3F51B5; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } @@ -851,12 +884,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #3F51B5; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: rgba(0, 0, 0, 0.87); } @@ -895,9 +931,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #b00020; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -905,22 +943,26 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -964,6 +1006,7 @@ .p-dropdown.p-invalid.p-component { border-color: #b00020; } + .p-dropdown-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1027,6 +1070,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #f5f5f5; } @@ -1039,9 +1083,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #b00020; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1054,60 +1106,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid rgba(0, 0, 0, 0.38); } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.75rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(0, 0, 0, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(0, 0, 0, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #b00020; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1115,9 +1185,11 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #b00020; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1125,12 +1197,14 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.5rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.5rem; } + .p-inputswitch { width: 2.75rem; height: 1rem; @@ -1169,9 +1243,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(63, 81, 181, 0.5); } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #b00020; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1204,45 +1280,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(0, 0, 0, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #b00020; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(0, 0, 0, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(0, 0, 0, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.6); } + :-moz-placeholder { color: rgba(0, 0, 0, 0.6); } + ::-moz-placeholder { color: rgba(0, 0, 0, 0.6); } + :-ms-input-placeholder { color: rgba(0, 0, 0, 0.6); } + .p-input-filled .p-inputtext { background-color: #f5f5f5; } @@ -1252,14 +1340,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #dcdcdc; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1334,9 +1425,11 @@ box-shadow: none; border-color: #3F51B5; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #b00020; } + .p-multiselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1376,9 +1469,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1386,6 +1481,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.75rem; } + .p-multiselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1474,6 +1570,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #f5f5f5; } @@ -1483,12 +1580,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #b00020; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #b00020; } + .p-password-panel { padding: 0.75rem; background: #ffffff; @@ -1510,6 +1610,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1517,6 +1618,7 @@ color: rgba(0, 0, 0, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1524,6 +1626,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1561,9 +1664,11 @@ background: #ffffff; color: #3F51B5; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #b00020; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f5f5f5; } @@ -1576,9 +1681,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffffff; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1609,6 +1716,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b00020; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); @@ -1616,7 +1724,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1625,7 +1733,7 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1634,7 +1742,7 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-selectbutton .p-button.p-highlight:hover { @@ -1643,12 +1751,14 @@ color: rgba(0, 0, 0, 0.87); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #b00020; } + .p-slider { background: #c1c1c1; border: 0 none; @@ -1700,6 +1810,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); @@ -1707,7 +1818,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1716,7 +1827,7 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1725,7 +1836,7 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } .p-togglebutton.p-button.p-highlight:hover { @@ -1734,12 +1845,14 @@ color: rgba(0, 0, 0, 0.87); } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: rgba(0, 0, 0, 0.6); } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #b00020; } + .p-treeselect { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.38); @@ -1776,12 +1889,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #b00020; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -1841,6 +1957,7 @@ color: rgba(0, 0, 0, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #f5f5f5; } @@ -1850,6 +1967,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #dcdcdc; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1857,6 +1975,7 @@ color: rgba(0, 0, 0, 0.6); right: 2.75rem; } + .p-button { color: #ffffff; background: #3F51B5; @@ -1968,7 +2087,7 @@ padding: 0.643rem; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1995,426 +2114,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.75rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #ff4081; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: rgba(255, 64, 129, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: rgba(255, 64, 129, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #ff4081; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 64, 129, 0.04); color: #ff4081; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 64, 129, 0.16); color: #ff4081; border: 0 none; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #ff4081; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 64, 129, 0.04); border-color: transparent; color: #ff4081; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 64, 129, 0.16); border-color: transparent; color: #ff4081; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #2196f3; border: 0 none; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: rgba(33, 150, 243, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: rgba(33, 150, 243, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(33, 150, 243, 0.04); color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(33, 150, 243, 0.16); color: #2196f3; border: 0 none; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #2196f3; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(33, 150, 243, 0.04); border-color: transparent; color: #2196f3; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(33, 150, 243, 0.16); border-color: transparent; color: #2196f3; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689f38; border: 0 none; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: rgba(104, 159, 56, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: rgba(104, 159, 56, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(104, 159, 56, 0.16); color: #689f38; border: 0 none; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #689f38; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689f38; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689f38; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #fbc02d; border: 0 none; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: rgba(251, 192, 45, 0.92); color: #212529; border-color: transparent; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: rgba(251, 192, 45, 0.68); color: #212529; border-color: transparent; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 192, 45, 0.16); color: #fbc02d; border: 0 none; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fbc02d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #fbc02d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #fbc02d; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 0 none; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: rgba(156, 39, 176, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: rgba(156, 39, 176, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 0 none; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d32f2f; border: 0 none; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: rgba(211, 47, 47, 0.92); color: #ffffff; border-color: transparent; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: none; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: rgba(211, 47, 47, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(211, 47, 47, 0.16); color: #d32f2f; border: 0 none; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d32f2f; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #d32f2f; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #d32f2f; } + .p-button.p-button-link { color: #3F51B5; background: transparent; @@ -2438,6 +2565,7 @@ color: #3F51B5; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2449,14 +2577,17 @@ width: 2rem; height: 2rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: none; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2467,45 +2598,52 @@ background: rgba(255, 64, 129, 0.92); color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.32); } + .p-splitbutton { border-radius: 4px; } @@ -2583,6 +2721,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #ff4081; @@ -2611,6 +2750,7 @@ border-color: transparent; color: #ff4081; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #2196f3; @@ -2639,6 +2779,7 @@ border-color: transparent; color: #2196f3; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #689f38; @@ -2667,6 +2808,7 @@ border-color: transparent; color: #689f38; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fbc02d; @@ -2695,6 +2837,7 @@ border-color: transparent; color: #fbc02d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2723,6 +2866,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d32f2f; @@ -2751,8 +2895,9 @@ border-color: transparent; color: #d32f2f; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -2763,13 +2908,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2795,6 +2940,7 @@ background: rgba(63, 81, 181, 0.12); color: #3F51B5; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2888,9 +3034,9 @@ padding: 0.75rem 0.75rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -2900,17 +3046,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -2940,12 +3086,12 @@ background: #3F51B5; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #ffffff; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #ffffff; } .p-datatable .p-datatable-loading-icon { @@ -3048,6 +3194,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.9375rem 0.9375rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3086,10 +3233,12 @@ .p-dataview .p-dataview-emptymessage { padding: 0.75rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3117,6 +3266,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3136,6 +3286,7 @@ outline-offset: 0; box-shadow: none; } + .p-column-filter-overlay { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3173,6 +3324,7 @@ border-top: 1px solid rgba(0, 0, 0, 0.12); margin: 0.5rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12); @@ -3201,6 +3353,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.75rem; } + .p-orderlist .p-orderlist-controls { padding: 0.75rem; } @@ -3286,6 +3439,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(0, 0, 0, 0.04); } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 0.75rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3294,6 +3448,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.87); @@ -3332,6 +3487,7 @@ outline-offset: 0; box-shadow: none; } + .p-paginator { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3341,9 +3497,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(0, 0, 0, 0.6); @@ -3354,9 +3510,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); border-color: transparent; color: rgba(0, 0, 0, 0.6); @@ -3413,6 +3569,7 @@ border-color: transparent; color: rgba(0, 0, 0, 0.6); } + .p-picklist .p-picklist-buttons { padding: 0.75rem; } @@ -3498,6 +3655,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(0, 0, 0, 0.04); } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 0.75rem; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); @@ -3506,6 +3664,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3517,19 +3676,20 @@ background-color: #bdbdbd; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e0e0e0; background: #ffffff; @@ -3586,11 +3746,11 @@ color: #3F51B5; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #3F51B5; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #3F51B5; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3663,6 +3823,7 @@ outline-offset: 0; box-shadow: none; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3802,7 +3963,7 @@ background: #3F51B5; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #ffffff; } .p-treetable .p-treetable-loading-icon { @@ -3863,6 +4024,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.9375rem 0.9375rem; } + .p-virtualscroller .p-virtualscroller-header { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3887,6 +4049,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 0 none; @@ -3959,6 +4122,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -3984,6 +4148,7 @@ .p-card .p-card-footer { padding: 0.75rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -4007,6 +4172,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e0e0e0; background: #ffffff; @@ -4047,6 +4213,7 @@ .p-fieldset .p-fieldset-content { padding: 0.75rem; } + .p-panel .p-panel-header { border: 1px solid #e0e0e0; padding: 0.75rem; @@ -4113,6 +4280,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; @@ -4123,6 +4291,7 @@ outline-offset: 0; box-shadow: none; } + .p-splitter { border: 1px solid #e0e0e0; background: #ffffff; @@ -4144,6 +4313,7 @@ .p-splitter .p-splitter-gutter-resizing { background: rgba(0, 0, 0, 0.12); } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.75rem; } @@ -4212,6 +4382,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #ffffff; border: 1px solid #e0e0e0; @@ -4222,6 +4393,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4269,6 +4441,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4341,6 +4514,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4382,6 +4556,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -4392,7 +4567,7 @@ padding: 0.75rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(0, 0, 0, 0.6); @@ -4402,13 +4577,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(0, 0, 0, 0.6); border-color: transparent; background: rgba(0, 0, 0, 0.04); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: none; @@ -4422,6 +4597,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.75rem; } + .p-tooltip .p-tooltip-text { background: rgba(97, 97, 97, 0.9); color: #ffffff; @@ -4441,6 +4617,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: rgba(97, 97, 97, 0.9); } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 0.75rem; @@ -4480,6 +4657,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: rgba(63, 81, 181, 0.92); color: #ffffff; @@ -4490,6 +4668,7 @@ color: #ffffff; border-color: transparent; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e5e5; @@ -4521,6 +4700,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(0, 0, 0, 0.6); } + .p-contextmenu { padding: 0.5rem 0; background: #ffffff; @@ -4568,7 +4748,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4582,7 +4762,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4593,7 +4773,7 @@ color: rgba(0, 0, 0, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-contextmenu .p-menuitem-separator { @@ -4607,6 +4787,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4630,31 +4811,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4713,7 +4895,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4727,7 +4909,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4738,7 +4920,7 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-megamenu .p-megamenu-panel { @@ -4796,9 +4978,10 @@ color: rgba(0, 0, 0, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } + .p-menu { padding: 0.5rem 0; background: #ffffff; @@ -4835,7 +5018,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4849,7 +5032,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4860,7 +5043,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menu.p-menu-overlay { @@ -4894,6 +5077,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.75rem; background: transparent; @@ -4932,7 +5116,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4963,7 +5147,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4977,7 +5161,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4988,7 +5172,7 @@ color: rgba(0, 0, 0, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-menubar .p-submenu-list { @@ -5005,6 +5189,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5179,7 +5364,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5193,7 +5378,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5204,7 +5389,7 @@ color: rgba(0, 0, 0, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5244,6 +5429,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.5rem 0; background: #ffffff; @@ -5286,7 +5472,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5300,7 +5486,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5311,7 +5497,7 @@ color: rgba(0, 0, 0, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-slidemenu.p-slidemenu-overlay { @@ -5358,6 +5544,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5402,6 +5589,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: solid rgba(0, 0, 0, 0.12); @@ -5472,6 +5660,7 @@ outline-offset: 0; box-shadow: inset none; } + .p-tieredmenu { padding: 0.5rem 0; background: #ffffff; @@ -5522,7 +5711,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5536,7 +5725,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5547,7 +5736,7 @@ color: rgba(0, 0, 0, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(0, 0, 0, 0.6); } .p-tieredmenu .p-menuitem-separator { @@ -5561,6 +5750,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5616,6 +5806,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 0.75rem 0; border-radius: 4px; @@ -5704,6 +5895,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5754,7 +5946,7 @@ color: #01579b; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #01579b; } .p-toast .p-toast-message.p-toast-message-success { @@ -5764,7 +5956,7 @@ color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1b5e20; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5774,7 +5966,7 @@ color: #7f6003; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #7f6003; } .p-toast .p-toast-message.p-toast-message-error { @@ -5784,9 +5976,10 @@ color: #b71c1c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #b71c1c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5817,7 +6010,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5874,7 +6067,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -5884,7 +6077,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.87); } @@ -5893,23 +6086,29 @@ outline-offset: 0; box-shadow: none; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5933,6 +6132,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: rgba(0, 0, 0, 0.12); border-radius: 4px; @@ -5953,9 +6153,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #3F51B5; color: #ffffff; @@ -5997,6 +6199,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.87); @@ -6032,6 +6235,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 1rem 1rem; border-radius: 4px; @@ -6046,6 +6250,7 @@ outline-offset: 0; box-shadow: none; } + .p-progressbar { border: 0 none; height: 4px; @@ -6061,6 +6266,7 @@ color: #ffffff; line-height: 4px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6082,6 +6288,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(0, 0, 0, 0.08); border-radius: 4px; @@ -6089,6 +6296,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #3F51B5; color: #ffffff; @@ -6121,6 +6329,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: rgba(0, 0, 0, 0.87); @@ -6172,9 +6381,11 @@ .p-accordion .p-accordion-tab .p-accordion-header.p-disabled .p-accordion-header-link > * { opacity: 0.38; } + .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-input-filled .p-autocomplete .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6204,9 +6415,11 @@ background-image: none; background: transparent; } + .p-float-label .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding-top: 0; padding-bottom: 0; @@ -6236,18 +6449,21 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-autocomplete.ng-dirty.ng-invalid .p-autocomplete > .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } p-autocomplete.ng-dirty.ng-invalid .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-breadcrumb .p-menuitem-link { padding: 0.25rem 0.5rem; } .p-breadcrumb .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-button { font-weight: 500; min-width: 4rem; @@ -6299,96 +6515,103 @@ .p-button.p-button-raised:enabled:focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } - .p-button.p-button-secondary:enabled:focus, .p-button-group.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { + + .p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus { background: rgba(255, 64, 129, 0.76); } - .p-button.p-button-secondary:enabled:active, .p-button-group.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { + .p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active { background: rgba(255, 64, 129, 0.68); } - .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-button-group.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus { background: rgba(255, 64, 129, 0.12); } - .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-button-group.p-button-secondary > .p-button.p-button-text:enabled:active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active { background: rgba(255, 64, 129, 0.16); } - .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { + .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink { background-color: rgba(255, 64, 129, 0.16); } - .p-button.p-button-info:enabled:focus, .p-button-group.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { + + .p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus { background: rgba(33, 150, 243, 0.76); } - .p-button.p-button-info:enabled:active, .p-button-group.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { + .p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active { background: rgba(33, 150, 243, 0.68); } - .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-button-group.p-button-info > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus { background: rgba(33, 150, 243, 0.12); } - .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-button-group.p-button-info > .p-button.p-button-text:enabled:active, .p-button-group.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active { background: rgba(33, 150, 243, 0.16); } - .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { + .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink { background-color: rgba(33, 150, 243, 0.16); } - .p-button.p-button-success:enabled:focus, .p-button-group.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { + + .p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus { background: rgba(104, 159, 56, 0.76); } - .p-button.p-button-success:enabled:active, .p-button-group.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { + .p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active { background: rgba(104, 159, 56, 0.68); } - .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-button-group.p-button-success > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus { background: rgba(104, 159, 56, 0.12); } - .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-button-group.p-button-success > .p-button.p-button-text:enabled:active, .p-button-group.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active { background: rgba(104, 159, 56, 0.16); } - .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { + .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink { background-color: rgba(104, 159, 56, 0.16); } - .p-button.p-button-warning:enabled:focus, .p-button-group.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { + + .p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus { background: rgba(251, 192, 45, 0.76); } - .p-button.p-button-warning:enabled:active, .p-button-group.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { + .p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active { background: rgba(251, 192, 45, 0.68); } - .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-button-group.p-button-warning > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus { background: rgba(251, 192, 45, 0.12); } - .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-button-group.p-button-warning > .p-button.p-button-text:enabled:active, .p-button-group.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active { background: rgba(251, 192, 45, 0.16); } - .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { + .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink { background-color: rgba(251, 192, 45, 0.16); } - .p-button.p-button-help:enabled:focus, .p-button-group.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { + + .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus { background: rgba(156, 39, 176, 0.76); } - .p-button.p-button-help:enabled:active, .p-button-group.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { + .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active { background: rgba(156, 39, 176, 0.68); } - .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-button-group.p-button-help > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus { background: rgba(156, 39, 176, 0.12); } - .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-button-group.p-button-help > .p-button.p-button-text:enabled:active, .p-button-group.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active { background: rgba(156, 39, 176, 0.16); } - .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { + .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink { background-color: rgba(156, 39, 176, 0.16); } - .p-button.p-button-danger:enabled:focus, .p-button-group.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { + + .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus { background: rgba(211, 47, 47, 0.76); } - .p-button.p-button-danger:enabled:active, .p-button-group.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { + .p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active { background: rgba(211, 47, 47, 0.68); } - .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-button-group.p-button-danger > .p-button.p-button-text:enabled:focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { + .p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus { background: rgba(211, 47, 47, 0.12); } - .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-button-group.p-button-danger > .p-button.p-button-text:enabled:active, .p-button-group.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { + .p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active { background: rgba(211, 47, 47, 0.16); } - .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { + .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink { background-color: rgba(211, 47, 47, 0.16); } + .p-calendar-w-btn { border: 1px solid rgba(0, 0, 0, 0.38); background: #ffffff; @@ -6435,6 +6658,7 @@ .p-calendar-w-btn.p-calendar-disabled .p-inputtext { opacity: 1; } + .p-datepicker .p-datepicker-header { border-bottom: 0 none; } @@ -6460,6 +6684,7 @@ .p-datepicker table td.p-datepicker-today.p-highlight { box-shadow: 0 0 0 1px rgba(63, 81, 181, 0.12); } + p-calendar.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } @@ -6472,6 +6697,7 @@ p-calendar.ng-dirty.ng-invalid .p-calendar-w-btn:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled .p-calendar-w-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6527,6 +6753,7 @@ border: 0 none; background-image: none; } + .p-cascadeselect .p-inputtext, .p-cascadeselect .p-cascadeselect-trigger { background-image: none; background: transparent; @@ -6537,9 +6764,11 @@ .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-cascadeselect-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } + .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6587,6 +6816,7 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + .p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -6606,13 +6836,16 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-cascadeselect.ng-dirty.ng-invalid .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #ff4081; color: #ffffff; } + .p-checkbox { border-radius: 50%; transition: box-shadow 0.2s; @@ -6654,12 +6887,14 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12); } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #ffffff; } .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { background-color: #ffffff; } + @keyframes checkbox-check { 0% { width: 0; @@ -6682,6 +6917,7 @@ .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6711,9 +6947,11 @@ background-image: none; background: transparent; } + .p-float-label .p-chips-multiple-container .p-chips-token { padding: 0.25rem 1rem; } + .p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-token { padding-top: 0; padding-bottom: 0; @@ -6735,9 +6973,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-chips.ng-dirty.ng-invalid .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-datatable .p-sortable-column { outline: 0 none; } @@ -6750,12 +6990,14 @@ .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus { background-color: rgba(0, 0, 0, 0.03); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #3F51B5; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { box-shadow: inset 0 -2px 0 0 #3F51B5; } + .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; background: transparent; @@ -6766,9 +7008,11 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-dropdown-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } + .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6812,9 +7056,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-galleria .p-galleria-indicators { padding: 1rem; } @@ -6826,12 +7072,14 @@ background: rgba(255, 64, 129, 0.68); color: #ffffff; } + .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } .p-inputtext:enabled:focus.ng-invalid.ng-dirty { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled .p-inputtext { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6861,6 +7109,7 @@ box-shadow: none; border-color: transparent; } + .p-input-filled .p-inputgroup .p-inputgroup-addon { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -6875,24 +7124,26 @@ border-right-color: transparent; } .p-input-filled .p-inputgroup-addon:first-child, - .p-input-filled .p-inputgroup button:first-child, - .p-input-filled .p-inputgroup input:first-child { +.p-input-filled .p-inputgroup button:first-child, +.p-input-filled .p-inputgroup input:first-child { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:first-child input { border-bottom-left-radius: 0; } .p-input-filled .p-inputgroup-addon:last-child, - .p-input-filled .p-inputgroup button:last-child, - .p-input-filled .p-inputgroup input:last-child { +.p-input-filled .p-inputgroup button:last-child, +.p-input-filled .p-inputgroup input:last-child { border-bottom-right-radius: 0; } .p-input-filled .p-inputgroup .p-float-label:last-child input { border-bottom-right-radius: 0; } + p-inputmask.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled p-inputmask.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); @@ -6901,9 +7152,11 @@ box-shadow: none; border-color: transparent; } + p-inputnumber.ng-dirty.ng-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-input-filled p-inputnumber.ng-dirty.ng-invalid .p-inputtext { border-color: transparent; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); @@ -6912,6 +7165,7 @@ box-shadow: none; border-color: transparent; } + .p-inputswitch .p-inputswitch-slider:before { transition-property: box-shadow transform; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); @@ -6928,45 +7182,51 @@ .p-inputswitch.p-inputswitch-checked.p-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-focus:not(.p-disabled):hover .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } + .p-fieldset .p-fieldset-legend { border: 0 none; } .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus { background: rgba(0, 0, 0, 0.12); } + .p-float-label input:focus ~ label, - .p-float-label input.p-filled ~ label, - .p-float-label textarea:focus ~ label, - .p-float-label textarea.p-filled ~ label, - .p-float-label .p-inputwrapper-focus ~ label, - .p-float-label .p-inputwrapper-filled ~ label { +.p-float-label input.p-filled ~ label, +.p-float-label textarea:focus ~ label, +.p-float-label textarea.p-filled ~ label, +.p-float-label .p-inputwrapper-focus ~ label, +.p-float-label .p-inputwrapper-filled ~ label { top: -0.5rem !important; background-color: #ffffff; padding: 2px 4px; margin-left: -4px; margin-top: 0; } + .p-float-label textarea ~ label { margin-top: 0; } + .p-float-label input:focus ~ label, - .p-float-label .p-inputwrapper-focus ~ label { +.p-float-label .p-inputwrapper-focus ~ label { color: #3F51B5; } + .p-input-filled .p-float-label .p-inputtext { padding-top: 1.25rem; padding-bottom: 0.25rem; } .p-input-filled .p-float-label input:focus ~ label, - .p-input-filled .p-float-label input.p-filled ~ label, - .p-input-filled .p-float-label textarea:focus ~ label, - .p-input-filled .p-float-label textarea.p-filled ~ label, - .p-input-filled .p-float-label .p-inputwrapper-focus ~ label, - .p-input-filled .p-float-label .p-inputwrapper-filled ~ label { +.p-input-filled .p-float-label input.p-filled ~ label, +.p-input-filled .p-float-label textarea:focus ~ label, +.p-input-filled .p-float-label textarea.p-filled ~ label, +.p-input-filled .p-float-label .p-inputwrapper-focus ~ label, +.p-input-filled .p-float-label .p-inputwrapper-filled ~ label { top: 0.25rem !important; margin-top: 0; background: transparent; } + .p-listbox .p-listbox-list .p-listbox-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } @@ -6976,21 +7236,25 @@ .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-menu .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); } + .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger { background-image: none; background: transparent; @@ -7001,6 +7265,7 @@ .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } @@ -7013,6 +7278,7 @@ .p-multiselect-panel .p-multiselect-close:focus { background: rgba(0, 0, 0, 0.12); } + .p-input-filled .p-multiselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -7046,11 +7312,13 @@ background-image: none; background: transparent; } + .p-float-label .p-multiselect-label .p-multiselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-multiselect .p-multiselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -7079,18 +7347,22 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + p-multiselect.ng-dirty.ng-invalid .p-multiselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-orderlist .p-orderlist-list .p-orderlist-item:focus { background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } + .p-paginator { justify-content: flex-end; } @@ -7100,13 +7372,14 @@ .p-paginator .p-paginator-element:focus.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-panel { border-radius: 4px; box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); } .p-panel .p-panel-header, - .p-panel .p-panel-content, - .p-panel .p-panel-footer { +.p-panel .p-panel-content, +.p-panel .p-panel-footer { border: 0 none; } .p-panel .p-panel-content { @@ -7118,6 +7391,7 @@ .p-panel .p-panel-header-icon:focus { background: rgba(0, 0, 0, 0.12); } + .p-panelmenu .p-panelmenu-panel { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); margin-bottom: 0; @@ -7153,18 +7427,21 @@ .p-panelmenu .p-panelmenu-panel .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item:focus { background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-progressbar { border-radius: 0; } .p-progressbar .p-progressbar-label { display: none !important; } + .p-radiobutton { border-radius: 50%; transition: box-shadow 0.2s; @@ -7190,12 +7467,14 @@ .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused { box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12); } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #ffffff; } .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { background-color: #ffffff; } + .p-rating { gap: 0; } @@ -7217,6 +7496,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item { background: rgba(176, 0, 32, 0.04); } + .p-selectbutton .p-button:focus { background: #e0e0e1; border-color: #e0e0e1; @@ -7225,12 +7505,14 @@ background: #d9d8d9; border-color: #d9d8d9; } + .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-slider .p-slider-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); @@ -7241,6 +7523,7 @@ .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } + .p-steps { padding: 1rem 0; } @@ -7293,6 +7576,7 @@ .p-steps .p-steps-item.p-disabled { opacity: 1; } + .p-tabview .p-tabview-nav { position: relative; } @@ -7315,9 +7599,11 @@ background-color: #3F51B5; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-toolbar { border: 0 none; } + .p-tooltip .p-tooltip-text { box-shadow: none; font-size: 0.875rem; @@ -7325,12 +7611,14 @@ .p-tooltip .p-tooltip-arrow { display: none; } + .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { background: rgba(0, 0, 0, 0.12); } + .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; background: transparent; @@ -7341,9 +7629,11 @@ .p-treeselect:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-treeselect-item .p-ink { background-color: rgba(63, 81, 181, 0.16); } + .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -7377,11 +7667,13 @@ background-image: none; background: transparent; } + .p-float-label .p-treeselect-label .p-treeselect-token { padding: 0.25rem 1rem; margin-top: 0.25rem; margin-bottom: 0.25rem; } + .p-input-filled .p-float-label .p-treeselect .p-treeselect-label { padding-top: 1.25rem; padding-bottom: 0.25rem; @@ -7410,9 +7702,11 @@ box-shadow: none; background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020); } + .p-treeselect.p-invalid:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; } + .p-tree .p-tree-container .p-treenode { outline: 0 none; } @@ -7422,6 +7716,7 @@ .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content.p-highlight { background: rgba(63, 81, 181, 0.24); } + .p-treetable .p-sortable-column { outline: 0 none; } @@ -7434,6 +7729,7 @@ .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus { background-color: rgba(0, 0, 0, 0.03); } + .p-tabmenu .p-tabmenu-nav { position: relative; } @@ -7458,12 +7754,14 @@ background-color: #3F51B5; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } + .p-timeline.p-timeline-vertical .p-timeline-event-connector { margin: 0.5rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { margin: 0 0.5rem; } + .p-togglebutton.p-button:focus { background: #e0e0e1; border-color: #e0e0e1; @@ -7472,6 +7770,7 @@ background: #d9d8d9; border-color: #d9d8d9; } + .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(63, 81, 181, 0.12); } @@ -7503,45 +7802,53 @@ .p-splitbutton.p-button-raised > .p-button:not(:disabled):focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } + .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(255, 64, 129, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { background: rgba(255, 64, 129, 0.16); } + .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(33, 150, 243, 0.12); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active { background: rgba(33, 150, 243, 0.16); } + .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(104, 159, 56, 0.12); } .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active { background: rgba(104, 159, 56, 0.16); } + .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(251, 192, 45, 0.12); } .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active { background: rgba(251, 192, 45, 0.16); } + .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(156, 39, 176, 0.12); } .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active { background: rgba(156, 39, 176, 0.16); } + .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(211, 47, 47, 0.12); } .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active { background: rgba(211, 47, 47, 0.16); } + .p-scrollpanel .p-scrollpanel-bar:focus { box-shadow: 0 0 1px 4px rgba(255, 64, 129, 0.2); } + .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { transition: transform 0.2s, box-shadow 0.2s; transform: scale(0.7); diff --git a/src/assets/components/themes/mira/theme.css b/src/assets/components/themes/mira/theme.css index ccbd0be0dd4..9b9778cc56f 100644 --- a/src/assets/components/themes/mira/theme.css +++ b/src/assets/components/themes/mira/theme.css @@ -52,25 +52,29 @@ font-family: "Inter"; font-style: normal; font-weight: 400; - src: local("Inter"), local("Inter-Regular"), url("./fonts/Inter-Regular.woff2") format("woff2"), url("./fonts/Inter-Regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Inter"), local("Inter-Regular"), url("./fonts/Inter-Regular.woff2") format("woff2"), url("./fonts/Inter-Regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; - src: local("Inter Medium"), local("Inter-Medium"), url("./fonts/Inter-Medium.woff2") format("woff2"), url("./fonts/Inter-Medium.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Inter Medium"), local("Inter-Medium"), url("./fonts/Inter-Medium.woff2") format("woff2"), url("./fonts/Inter-Medium.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; - src: local("Inter SemiBold"), local("Inter-SemiBold"), url("./fonts/Inter-SemiBold.woff2") format("woff2"), url("./fonts/Inter-SemiBold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Inter SemiBold"), local("Inter-SemiBold"), url("./fonts/Inter-SemiBold.woff2") format("woff2"), url("./fonts/Inter-SemiBold.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; - src: local("Inter Bold"), local("Inter-Bold"), url("./fonts/Inter-Bold.woff2") format("woff2"), url("./fonts/Inter-Bold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Inter Bold"), local("Inter-Bold"), url("./fonts/Inter-Bold.woff2") format("woff2"), url("./fonts/Inter-Bold.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f7f9fb; @@ -298,32 +302,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(112, 120, 136, 0.5); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #bf616a; } + .p-text-secondary { color: #81a1c1; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -335,12 +347,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .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; @@ -357,6 +372,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -403,6 +419,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #bf616a; } + .p-autocomplete-panel { background: #ffffff; color: #4c566a; @@ -449,9 +466,11 @@ color: #4c566a; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #bf616a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -459,19 +478,23 @@ color: #81a1c1; right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #81a1c1; right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #bf616a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; border-color: #81a1c1; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -498,7 +521,7 @@ border-top-left-radius: 4px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #81a1c1; @@ -508,13 +531,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #4c566a; border-color: #5e81ac; background: #ffffff; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; @@ -523,14 +546,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #4c566a; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #5e81ac; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -679,6 +702,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -686,10 +710,12 @@ color: #81a1c1; right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #81a1c1; right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -732,6 +758,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #bf616a; } + .p-cascadeselect-panel { background: #ffffff; color: #4c566a; @@ -771,6 +798,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #eceff4; } @@ -780,9 +808,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #bf616a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -790,6 +820,7 @@ color: #81a1c1; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -798,6 +829,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -838,9 +870,11 @@ background: #81a1c1; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #bf616a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #eceff4; } @@ -853,12 +887,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #81a1c1; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #bf616a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #81a1c1; } @@ -897,9 +934,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #bf616a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -907,22 +946,26 @@ color: #81a1c1; right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid #d8dee9; @@ -966,6 +1009,7 @@ .p-dropdown.p-invalid.p-component { border-color: #bf616a; } + .p-dropdown-panel { background: #ffffff; color: #4c566a; @@ -1029,6 +1073,7 @@ color: #4c566a; background: transparent; } + .p-input-filled .p-dropdown { background: #eceff4; } @@ -1041,9 +1086,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #bf616a; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #ffffff; color: #81a1c1; @@ -1056,60 +1109,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #d8dee9; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: #81a1c1; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: #81a1c1; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #bf616a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1117,9 +1188,11 @@ color: #81a1c1; right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #bf616a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1127,12 +1200,14 @@ color: #81a1c1; right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1171,9 +1246,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #81a1c1; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #bf616a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1206,45 +1283,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: #4c566a; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #bf616a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: #81a1c1; } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: #81a1c1; } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: #4c566a; } + :-moz-placeholder { color: #4c566a; } + ::-moz-placeholder { color: #4c566a; } + :-ms-input-placeholder { color: #4c566a; } + .p-input-filled .p-inputtext { background-color: #eceff4; } @@ -1254,14 +1343,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #ffffff; color: #4c566a; @@ -1336,9 +1428,11 @@ box-shadow: 0 0 0 0.2rem #c0d0e0; border-color: #81a1c1; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #bf616a; } + .p-multiselect { background: #ffffff; border: 1px solid #d8dee9; @@ -1378,9 +1472,11 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1388,6 +1484,7 @@ color: #81a1c1; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #4c566a; @@ -1476,6 +1573,7 @@ color: #4c566a; background: transparent; } + .p-input-filled .p-multiselect { background: #eceff4; } @@ -1485,12 +1583,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #bf616a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #bf616a; } + .p-password-panel { padding: 1rem; background: #ffffff; @@ -1512,6 +1613,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #7fa366; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1519,6 +1621,7 @@ color: #81a1c1; right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1526,6 +1629,7 @@ color: #81a1c1; right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1563,9 +1667,11 @@ background: #81a1c1; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #bf616a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #eceff4; } @@ -1578,9 +1684,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #81a1c1; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1611,6 +1719,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #d88889; } + .p-selectbutton .p-button { background: #ffffff; border: 2px solid #d8dee9; @@ -1618,7 +1727,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #81a1c1; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1627,7 +1736,7 @@ color: #4c566a; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #81a1c1; } .p-selectbutton .p-button.p-highlight { @@ -1636,7 +1745,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1645,12 +1754,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #bf616a; } + .p-slider { background: #e5e9f0; border: 0 none; @@ -1702,6 +1813,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 2px solid #d8dee9; @@ -1709,7 +1821,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #81a1c1; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1718,7 +1830,7 @@ color: #4c566a; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #81a1c1; } .p-togglebutton.p-button.p-highlight { @@ -1727,7 +1839,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1736,12 +1848,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #bf616a; } + .p-treeselect { background: #ffffff; border: 1px solid #d8dee9; @@ -1778,12 +1892,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #bf616a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #ffffff; color: #4c566a; @@ -1843,6 +1960,7 @@ color: #4c566a; background: transparent; } + .p-input-filled .p-treeselect { background: #eceff4; } @@ -1852,6 +1970,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1859,6 +1978,7 @@ color: #81a1c1; right: 2.357rem; } + .p-button { color: #ffffff; background: #5e81ac; @@ -1970,7 +2090,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1997,426 +2117,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #4c566a; border: 2px solid #4c566a; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #707888; color: #ffffff; border-color: #4c566a; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #b3bac8; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #2e3440; color: #ffffff; border-color: #2e3440; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #4c566a; border: 2px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(76, 86, 106, 0.12); color: #4c566a; border: 2px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(76, 86, 106, 0.24); color: #4c566a; border: 2px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #4c566a; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(76, 86, 106, 0.12); border-color: transparent; color: #4c566a; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(76, 86, 106, 0.24); border-color: transparent; color: #4c566a; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #639bb2; border: 2px solid #639bb2; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #88c0d0; color: #ffffff; border-color: #639bb2; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #c1d7e0; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #497e94; color: #ffffff; border-color: #497e94; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #639bb2; border: 2px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(99, 155, 178, 0.12); color: #639bb2; border: 2px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(99, 155, 178, 0.24); color: #639bb2; border: 2px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #639bb2; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(99, 155, 178, 0.12); border-color: transparent; color: #639bb2; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(99, 155, 178, 0.24); border-color: transparent; color: #639bb2; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #7fa366; border: 2px solid #7fa366; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #a3be8c; color: #ffffff; border-color: #7fa366; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ccdac2; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #658450; color: #ffffff; border-color: #658450; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #7fa366; border: 2px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(127, 163, 102, 0.12); color: #7fa366; border: 2px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(127, 163, 102, 0.24); color: #7fa366; border: 2px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #7fa366; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(127, 163, 102, 0.12); border-color: transparent; color: #7fa366; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(127, 163, 102, 0.24); border-color: transparent; color: #7fa366; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #d08770; border: 2px solid #d08770; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #e2ac94; color: #ffffff; border-color: #d08770; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #eccfc6; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #c05f40; color: #ffffff; border-color: #c05f40; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #d08770; border: 2px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(208, 135, 112, 0.12); color: #d08770; border: 2px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(208, 135, 112, 0.24); color: #d08770; border: 2px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #d08770; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(208, 135, 112, 0.12); border-color: transparent; color: #d08770; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(208, 135, 112, 0.24); border-color: transparent; color: #d08770; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9a6796; border: 2px solid #9a6796; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #b48ead; color: #ffffff; border-color: #9a6796; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #d7c2d5; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7c5278; color: #ffffff; border-color: #7c5278; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9a6796; border: 2px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(154, 103, 150, 0.12); color: #9a6796; border: 2px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(154, 103, 150, 0.24); color: #9a6796; border: 2px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9a6796; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(154, 103, 150, 0.12); border-color: transparent; color: #9a6796; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(154, 103, 150, 0.24); border-color: transparent; color: #9a6796; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #bf616a; border: 2px solid #bf616a; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #d88889; color: #ffffff; border-color: #bf616a; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e5c0c3; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #a4424c; color: #ffffff; border-color: #a4424c; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #bf616a; border: 2px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(191, 97, 106, 0.12); color: #bf616a; border: 2px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(191, 97, 106, 0.24); color: #bf616a; border: 2px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #bf616a; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(191, 97, 106, 0.12); border-color: transparent; color: #bf616a; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(191, 97, 106, 0.24); border-color: transparent; color: #bf616a; } + .p-button.p-button-link { color: #48678c; background: transparent; @@ -2440,6 +2568,7 @@ color: #48678c; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2451,14 +2580,17 @@ width: 2rem; height: 2rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2469,45 +2601,52 @@ background: #3b4252; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(112, 120, 136, 0.5); } + .p-splitbutton { border-radius: 4px; } @@ -2585,6 +2724,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #4c566a; @@ -2613,6 +2753,7 @@ border-color: transparent; color: #4c566a; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #639bb2; @@ -2641,6 +2782,7 @@ border-color: transparent; color: #639bb2; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #7fa366; @@ -2669,6 +2811,7 @@ border-color: transparent; color: #7fa366; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #d08770; @@ -2697,6 +2840,7 @@ border-color: transparent; color: #d08770; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9a6796; @@ -2725,6 +2869,7 @@ border-color: transparent; color: #9a6796; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #bf616a; @@ -2753,8 +2898,9 @@ border-color: transparent; color: #bf616a; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #81a1c1; @@ -2765,13 +2911,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #4c566a; border-color: #5e81ac; background: #ffffff; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; @@ -2797,6 +2943,7 @@ background: #d8dee9; color: #2e3440; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2890,9 +3037,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #81a1c1; @@ -2902,17 +3049,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #4c566a; border-color: #5e81ac; background: #ffffff; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; @@ -2942,12 +3089,12 @@ background: #5e81ac; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #ffffff; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #eceff4; } .p-datatable .p-datatable-loading-icon { @@ -3050,6 +3197,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3088,10 +3236,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3119,6 +3269,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3138,6 +3289,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-column-filter-overlay { background: #ffffff; color: #4c566a; @@ -3175,6 +3327,7 @@ border-top: 1px solid #e5e9f0; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3203,6 +3356,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3288,6 +3442,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: transparent; } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3296,6 +3451,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: transparent; color: #4c566a; @@ -3334,6 +3490,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-paginator { background: #ffffff; color: #4c566a; @@ -3343,9 +3500,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #4c566a; @@ -3356,9 +3513,9 @@ border-radius: 4px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #eceff4; border-color: #5e81ac; color: #4c566a; @@ -3415,6 +3572,7 @@ border-color: #5e81ac; color: #4c566a; } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3500,6 +3658,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: transparent; } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3508,6 +3667,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3519,19 +3679,20 @@ background-color: #e5e9f0; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e5e9f0; background: #ffffff; @@ -3588,11 +3749,11 @@ color: #2e3440; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #2e3440; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #2e3440; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3665,6 +3826,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3804,7 +3966,7 @@ background: #5e81ac; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #ffffff; } .p-treetable .p-treetable-loading-icon { @@ -3865,6 +4027,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #ffffff; color: #4c566a; @@ -3889,6 +4052,7 @@ border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #e5e9f0; @@ -3961,6 +4125,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-card { background: #ffffff; color: #4c566a; @@ -3986,6 +4151,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -4009,6 +4175,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e5e9f0; background: #ffffff; @@ -4049,6 +4216,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #e5e9f0; padding: 1rem; @@ -4115,6 +4283,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #eceff4; border: 0 none; @@ -4125,6 +4294,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-splitter { border: 1px solid #e5e9f0; background: #ffffff; @@ -4146,6 +4316,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #c2c7d1; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4214,6 +4385,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-toolbar { background: #ffffff; border: 1px solid #e5e9f0; @@ -4224,6 +4396,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #4c566a; @@ -4271,6 +4444,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 4px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4343,6 +4517,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #4c566a; @@ -4384,6 +4559,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #4c566a; @@ -4394,7 +4570,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #81a1c1; @@ -4404,13 +4580,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #4c566a; border-color: #5e81ac; background: #ffffff; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; @@ -4424,6 +4600,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #4c566a; color: #ffffff; @@ -4443,6 +4620,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #4c566a; } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1rem; @@ -4482,6 +4660,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #81a1c1; color: #ffffff; @@ -4492,6 +4671,7 @@ color: #ffffff; border-color: #48678c; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e9f0; @@ -4523,6 +4703,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #81a1c1; } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4570,7 +4751,7 @@ color: #4c566a; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4584,7 +4765,7 @@ color: #4c566a; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4c566a; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4595,7 +4776,7 @@ color: #4c566a; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-contextmenu .p-menuitem-separator { @@ -4609,6 +4790,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4632,31 +4814,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4715,7 +4898,7 @@ color: #4c566a; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4729,7 +4912,7 @@ color: #4c566a; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4c566a; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4740,7 +4923,7 @@ color: #4c566a; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-megamenu .p-megamenu-panel { @@ -4798,9 +4981,10 @@ color: #4c566a; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #81a1c1; } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4837,7 +5021,7 @@ color: #4c566a; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4851,7 +5035,7 @@ color: #4c566a; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4c566a; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4862,7 +5046,7 @@ color: #4c566a; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-menu.p-menu-overlay { @@ -4896,6 +5080,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #eceff4; @@ -4934,7 +5119,7 @@ color: #4c566a; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4965,7 +5150,7 @@ color: #4c566a; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4979,7 +5164,7 @@ color: #4c566a; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4c566a; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4990,7 +5175,7 @@ color: #4c566a; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-menubar .p-submenu-list { @@ -5007,6 +5192,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5181,7 +5367,7 @@ color: #4c566a; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5195,7 +5381,7 @@ color: #4c566a; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4c566a; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5206,7 +5392,7 @@ color: #4c566a; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5246,6 +5432,7 @@ border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } + .p-slidemenu { padding: 0.25rem 0; background: #ffffff; @@ -5288,7 +5475,7 @@ color: #4c566a; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5302,7 +5489,7 @@ color: #4c566a; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4c566a; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5313,7 +5500,7 @@ color: #4c566a; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-slidemenu.p-slidemenu-overlay { @@ -5360,6 +5547,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5404,6 +5592,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 2px solid #e5e9f0; @@ -5474,6 +5663,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #c0d0e0; } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5524,7 +5714,7 @@ color: #4c566a; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5538,7 +5728,7 @@ color: #4c566a; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #4c566a; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5549,7 +5739,7 @@ color: #4c566a; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #81a1c1; } .p-tieredmenu .p-menuitem-separator { @@ -5563,6 +5753,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5618,6 +5809,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 4px; @@ -5706,6 +5898,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5756,7 +5949,7 @@ color: #2e4f5d; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #17282e; } .p-toast .p-toast-message.p-toast-message-success { @@ -5766,7 +5959,7 @@ color: #202919; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #202919; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5776,7 +5969,7 @@ color: #3c1d14; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #3c1d14; } .p-toast .p-toast-message.p-toast-message-error { @@ -5786,9 +5979,10 @@ color: #331518; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #331518; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5819,7 +6013,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5876,7 +6070,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #eceff4; @@ -5886,7 +6080,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #eceff4; } @@ -5895,23 +6089,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5935,6 +6135,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #e5e9f0; border-radius: 4px; @@ -5955,9 +6156,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #5e81ac; color: #ffffff; @@ -5999,6 +6202,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #e5e9f0; color: #4c566a; @@ -6034,6 +6238,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 4px; @@ -6048,6 +6253,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6063,6 +6269,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6084,6 +6291,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e5e9f0; border-radius: 4px; @@ -6091,6 +6299,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #5e81ac; color: #ffffff; @@ -6123,6 +6332,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #4c566a; @@ -6143,48 +6353,59 @@ .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-chips .p-chips-multiple-container:not(.p-disabled):hover { background-color: #eceff4; } .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { background-color: #ffffff; } + .p-autocomplete .p-autocomplete-panel .p-autocomplete-item:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { background-color: #eceff4; } + .p-dropdown:not(.p-disabled):hover { background-color: #eceff4; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-multiselect:not(.p-disabled):hover { background-color: #eceff4; } + .p-button { font-weight: 500; } + .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { background-color: #d8dee9; } .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { border-color: transparent; } + .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { background-color: #d8dee9; } .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { border-color: transparent; } + .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover:not(.p-disabled) .p-accordion-header-link:focus { box-shadow: inset 0 0 0 0.1rem #81a1c1; } @@ -6194,6 +6415,7 @@ .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-datepicker table td > span.p-highlight { color: #ffffff; background: #5e81ac; @@ -6206,33 +6428,40 @@ color: #ffffff; background: #5e81ac; } + .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-menubar .p-menuitem-link:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-menu .p-menuitem-link:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-contextmenu .p-menuitem-link:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { border: 1px solid #5e81ac; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { border: 1px solid #5e81ac; } + .p-datatable .p-sortable-column:not(.p-highlight):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } @@ -6245,18 +6474,22 @@ .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { outline: 1px solid #81a1c1; } + .p-overlaypanel .p-overlaypanel-close:enabled:hover { background: #81a1c1; color: #ffffff; border: 2px solid #51749e; } + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { background: #ffffff; box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-treetable .p-sortable-column:not(.p-highlight):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } @@ -6274,12 +6507,14 @@ .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { outline: 1px solid #81a1c1; } + .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } .p-megamenu .p-menuitem-link:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } @@ -6289,17 +6524,21 @@ .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-slidemenu .p-menuitem-link:not(.p-disabled):hover { box-shadow: inset 0 0 0 0.1rem #81a1c1; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: #5e81ac; color: #ffffff; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #5e81ac; color: #ffffff; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #5e81ac; } diff --git a/src/assets/components/themes/nano/theme.css b/src/assets/components/themes/nano/theme.css index 63614410cc6..c1edd4c45b9 100644 --- a/src/assets/components/themes/nano/theme.css +++ b/src/assets/components/themes/nano/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #d8222f; } + .p-text-secondary { color: #697077; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.25rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #d8222f; } + .p-autocomplete-panel { background: #ffffff; color: #343a3f; @@ -427,9 +440,11 @@ color: #343a3f; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #d8222f; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 1.5rem; } @@ -437,19 +452,23 @@ color: #697077; right: 0.25rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #697077; right: 2.607rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #d8222f; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; border-color: #1174c0; } + .p-datepicker { padding: 0.25rem; background: #ffffff; @@ -476,7 +495,7 @@ border-top-left-radius: 1px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 1rem; height: 1rem; color: #878d96; @@ -486,13 +505,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #343a3f; border-color: #121619; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; @@ -501,14 +520,14 @@ line-height: 1rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #343a3f; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #1174c0; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 1.5rem; } @@ -664,10 +684,12 @@ color: #697077; right: 0.25rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #697077; right: 2.607rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #d8222f; } + .p-cascadeselect-panel { background: #ffffff; color: #343a3f; @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f2f4f8; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #d8222f; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.25rem; } @@ -768,6 +794,7 @@ color: #697077; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 14px; height: 14px; @@ -816,9 +844,11 @@ background: #0e5d9a; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #d8222f; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f2f4f8; } @@ -831,12 +861,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #0e5d9a; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #d8222f; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #1174c0; } @@ -875,9 +908,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #d8222f; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.25rem; } @@ -885,22 +920,26 @@ color: #697077; right: 0.25rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid #a5acb3; @@ -944,6 +983,7 @@ .p-dropdown.p-invalid.p-component { border-color: #d8222f; } + .p-dropdown-panel { background: #ffffff; color: #343a3f; @@ -1007,6 +1047,7 @@ color: #343a3f; background: transparent; } + .p-input-filled .p-dropdown { background: #f2f4f8; } @@ -1019,9 +1060,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #d8222f; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #dde1e6; color: #697077; @@ -1034,60 +1083,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #a5acb3; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 1px; border-bottom-left-radius: 1px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 1px; border-bottom-left-radius: 1px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 1px; border-bottom-right-radius: 1px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 1px; border-bottom-right-radius: 1px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.25rem; + color: #697077; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.25rem; + color: #697077; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #d8222f; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 1.5rem; } @@ -1095,9 +1162,11 @@ color: #697077; right: 0.25rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #d8222f; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 1.5rem; } @@ -1105,12 +1174,14 @@ color: #697077; right: 0.25rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.607rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.607rem; } + .p-inputswitch { width: 2rem; height: 1.155rem; @@ -1149,9 +1220,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #0f68ad; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #d8222f; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1184,45 +1257,57 @@ font-size: 1.25rem; padding: 0.3125rem 0.3125rem; } + .p-float-label > label { left: 0.25rem; color: #697077; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #d8222f; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.25rem; color: #697077; } + .p-input-icon-left > .p-inputtext { padding-left: 1.5rem; } + .p-input-icon-left.p-float-label > label { left: 1.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.25rem; color: #697077; } + .p-input-icon-right > .p-inputtext { padding-right: 1.5rem; } + ::-webkit-input-placeholder { color: #697077; } + :-moz-placeholder { color: #697077; } + ::-moz-placeholder { color: #697077; } + :-ms-input-placeholder { color: #697077; } + .p-input-filled .p-inputtext { background-color: #f2f4f8; } @@ -1232,14 +1317,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.21875rem 0.21875rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.3125rem 0.3125rem; } + .p-listbox { background: #ffffff; color: #343a3f; @@ -1314,9 +1402,11 @@ box-shadow: 0 0 0 0.2rem #90c9f5; border-color: #1174c0; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #d8222f; } + .p-multiselect { background: #ffffff; border: 1px solid #a5acb3; @@ -1356,9 +1446,11 @@ border-top-right-radius: 1px; border-bottom-right-radius: 1px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.125rem 0.25rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.25rem; } @@ -1366,6 +1458,7 @@ color: #697077; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #343a3f; @@ -1454,6 +1547,7 @@ color: #343a3f; background: transparent; } + .p-input-filled .p-multiselect { background: #f2f4f8; } @@ -1463,12 +1557,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #d8222f; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #d8222f; } + .p-password-panel { padding: 0.5rem; background: #ffffff; @@ -1490,6 +1587,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #207f3b; } + p-password.p-password-clearable .p-password-input { padding-right: 1.5rem; } @@ -1497,6 +1595,7 @@ color: #697077; right: 0.25rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 2.75rem; } @@ -1504,6 +1603,7 @@ color: #697077; right: 1.5rem; } + .p-radiobutton { width: 14px; height: 14px; @@ -1541,9 +1641,11 @@ background: #0e5d9a; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #d8222f; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f2f4f8; } @@ -1556,9 +1658,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0e5d9a; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1589,6 +1693,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #c0392b; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #a5acb3; @@ -1596,7 +1701,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #697077; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1605,7 +1710,7 @@ color: #343a3f; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #697077; } .p-selectbutton .p-button.p-highlight { @@ -1614,7 +1719,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1623,12 +1728,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #d8222f; } + .p-slider { background: #dee2e6; border: 0 none; @@ -1680,6 +1787,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #a5acb3; @@ -1687,7 +1795,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #697077; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1696,7 +1804,7 @@ color: #343a3f; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #697077; } .p-togglebutton.p-button.p-highlight { @@ -1705,7 +1813,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1714,12 +1822,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #d8222f; } + .p-treeselect { background: #ffffff; border: 1px solid #a5acb3; @@ -1756,12 +1866,15 @@ border-top-right-radius: 1px; border-bottom-right-radius: 1px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #d8222f; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.125rem 0.25rem; } + .p-treeselect-panel { background: #ffffff; color: #343a3f; @@ -1821,6 +1934,7 @@ color: #343a3f; background: transparent; } + .p-input-filled .p-treeselect { background: #f2f4f8; } @@ -1830,6 +1944,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.25rem; } @@ -1837,6 +1952,7 @@ color: #697077; right: 2.357rem; } + .p-button { color: #ffffff; background: #1174c0; @@ -1948,7 +2064,7 @@ padding: 0.25rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1975,426 +2091,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #697077; border: 1px solid #697077; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #5f656b; color: #ffffff; border-color: #5f656b; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #c2c6c9; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #545a5f; color: #ffffff; border-color: #545a5f; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #697077; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(105, 112, 119, 0.04); color: #697077; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(105, 112, 119, 0.16); color: #697077; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #697077; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(105, 112, 119, 0.04); border-color: transparent; color: #697077; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(105, 112, 119, 0.16); border-color: transparent; color: #697077; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #107d79; border: 1px solid #107d79; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #0e716d; color: #ffffff; border-color: #0e716d; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #7ceeea; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #0d6461; color: #ffffff; border-color: #0d6461; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #107d79; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(16, 125, 121, 0.04); color: #107d79; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(16, 125, 121, 0.16); color: #107d79; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #107d79; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(16, 125, 121, 0.04); border-color: transparent; color: #107d79; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(16, 125, 121, 0.16); border-color: transparent; color: #107d79; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #207f3b; border: 1px solid #207f3b; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #1d7235; color: #ffffff; border-color: #1d7235; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #8fe3a7; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #1a662f; color: #ffffff; border-color: #1a662f; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #207f3b; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(32, 127, 59, 0.04); color: #207f3b; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(32, 127, 59, 0.16); color: #207f3b; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #207f3b; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(32, 127, 59, 0.04); border-color: transparent; color: #207f3b; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(32, 127, 59, 0.16); border-color: transparent; color: #207f3b; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #f0c135; border: 1px solid #f0c135; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #eeb91a; color: #212529; border-color: #eeb91a; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #f9e6ae; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #daa710; color: #212529; border-color: #daa710; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #f0c135; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(240, 193, 53, 0.04); color: #f0c135; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(240, 193, 53, 0.16); color: #f0c135; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #f0c135; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(240, 193, 53, 0.04); border-color: transparent; color: #f0c135; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(240, 193, 53, 0.16); border-color: transparent; color: #f0c135; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #8949f8; border: 1px solid #8949f8; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #752af7; color: #ffffff; border-color: #752af7; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #d0b6fc; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #610bf6; color: #ffffff; border-color: #610bf6; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #8949f8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(137, 73, 248, 0.04); color: #8949f8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(137, 73, 248, 0.16); color: #8949f8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #8949f8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(137, 73, 248, 0.04); border-color: transparent; color: #8949f8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(137, 73, 248, 0.16); border-color: transparent; color: #8949f8; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d8222f; border: 1px solid #d8222f; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c21f2a; color: #ffffff; border-color: #c21f2a; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #f1a5ab; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #ad1b26; color: #ffffff; border-color: #ad1b26; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d8222f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(216, 34, 47, 0.04); color: #d8222f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(216, 34, 47, 0.16); color: #d8222f; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d8222f; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(216, 34, 47, 0.04); border-color: transparent; color: #d8222f; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(216, 34, 47, 0.16); border-color: transparent; color: #d8222f; } + .p-button.p-button-link { color: #0e5d9a; background: transparent; @@ -2418,6 +2542,7 @@ color: #0e5d9a; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 2.75rem; height: 2.75rem; @@ -2429,14 +2554,17 @@ width: 1rem; height: 1rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-speeddial-action { width: 2.25rem; height: 2.25rem; @@ -2447,45 +2575,52 @@ background: #21272a; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 1px; } @@ -2563,6 +2698,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #697077; @@ -2591,6 +2727,7 @@ border-color: transparent; color: #697077; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #107d79; @@ -2619,6 +2756,7 @@ border-color: transparent; color: #107d79; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #207f3b; @@ -2647,6 +2785,7 @@ border-color: transparent; color: #207f3b; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #f0c135; @@ -2675,6 +2814,7 @@ border-color: transparent; color: #f0c135; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #8949f8; @@ -2703,6 +2843,7 @@ border-color: transparent; color: #8949f8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d8222f; @@ -2731,8 +2872,9 @@ border-color: transparent; color: #d8222f; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 1rem; height: 1rem; color: #878d96; @@ -2743,13 +2885,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #343a3f; border-color: #121619; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; @@ -2775,6 +2917,7 @@ background: #44a1d9; color: #ffffff; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2868,9 +3011,9 @@ padding: 0.25rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 1rem; height: 1rem; color: #878d96; @@ -2880,17 +3023,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #343a3f; border-color: #121619; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; @@ -2920,12 +3063,12 @@ background: #1174c0; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f2f4f8; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f2f4f8; } .p-datatable .p-datatable-loading-icon { @@ -3028,6 +3171,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.3125rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3066,10 +3210,12 @@ .p-dataview .p-dataview-emptymessage { padding: 0.5rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 1rem; height: 1rem; @@ -3097,6 +3243,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-column-filter-clear-button { width: 1rem; height: 1rem; @@ -3116,6 +3263,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-column-filter-overlay { background: #ffffff; color: #343a3f; @@ -3153,6 +3301,7 @@ border-top: 1px solid #dee2e6; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.25rem 0.5rem; border-bottom: 0 none; @@ -3181,6 +3330,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.5rem; } + .p-orderlist .p-orderlist-controls { padding: 0.5rem; } @@ -3266,6 +3416,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #dde1e6; } + .p-orderlist-item.cdk-drag-preview { padding: 0.25rem 0.5rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3274,6 +3425,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #dde1e6; color: #343a3f; @@ -3312,6 +3464,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-paginator { background: #ffffff; color: #697077; @@ -3321,9 +3474,9 @@ border-radius: 1px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #697077; @@ -3334,9 +3487,9 @@ border-radius: 1px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #dde1e6; border-color: transparent; color: #343a3f; @@ -3393,6 +3546,7 @@ border-color: transparent; color: #343a3f; } + .p-picklist .p-picklist-buttons { padding: 0.5rem; } @@ -3478,6 +3632,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #dde1e6; } + .p-picklist-item.cdk-drag-preview { padding: 0.25rem 0.5rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3486,6 +3641,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3497,19 +3653,20 @@ background-color: #dee2e6; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3566,11 +3723,11 @@ color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3643,6 +3800,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3782,7 +3940,7 @@ background: #1174c0; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f2f4f8; } .p-treetable .p-treetable-loading-icon { @@ -3843,6 +4001,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.3125rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f2f4f8; color: #343a3f; @@ -3867,6 +4026,7 @@ border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.75rem; border: 1px solid #dee2e6; @@ -3939,6 +4099,7 @@ border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; } + .p-card { background: #ffffff; color: #343a3f; @@ -3964,6 +4125,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3987,6 +4149,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -4027,6 +4190,7 @@ .p-fieldset .p-fieldset-content { padding: 0.5rem; } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 0.75rem; @@ -4093,6 +4257,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f2f4f8; border: 0 none; @@ -4103,6 +4268,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -4124,6 +4290,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4192,6 +4359,7 @@ border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; } + .p-toolbar { background: #f2f4f8; border: 1px solid #dee2e6; @@ -4202,6 +4370,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #343a3f; @@ -4249,6 +4418,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 1px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4321,6 +4491,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #343a3f; @@ -4362,6 +4533,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #343a3f; @@ -4372,7 +4544,7 @@ padding: 0.75rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 1rem; height: 1rem; color: #878d96; @@ -4382,13 +4554,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #343a3f; border-color: #121619; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; @@ -4402,6 +4574,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.75rem; } + .p-tooltip .p-tooltip-text { background: #343a3f; color: #ffffff; @@ -4421,6 +4594,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #343a3f; } + .p-fileupload .p-fileupload-buttonbar { background: #f2f4f8; padding: 0.75rem; @@ -4460,6 +4634,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #0f68ad; color: #ffffff; @@ -4470,6 +4645,7 @@ color: #ffffff; border-color: #0e5d9a; } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4501,6 +4677,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #697077; } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4548,7 +4725,7 @@ color: #343a3f; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #697077; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4739,7 @@ color: #343a3f; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #343a3f; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4573,7 +4750,7 @@ color: #343a3f; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #697077; } .p-contextmenu .p-menuitem-separator { @@ -4587,6 +4764,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4610,31 +4788,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4693,7 +4872,7 @@ color: #343a3f; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #697077; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4707,7 +4886,7 @@ color: #343a3f; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #343a3f; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4718,7 +4897,7 @@ color: #343a3f; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #697077; } .p-megamenu .p-megamenu-panel { @@ -4776,9 +4955,10 @@ color: #343a3f; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #697077; } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4815,7 +4995,7 @@ color: #343a3f; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #697077; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4829,7 +5009,7 @@ color: #343a3f; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #343a3f; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4840,7 +5020,7 @@ color: #343a3f; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #697077; } .p-menu.p-menu-overlay { @@ -4874,6 +5054,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f2f4f8; @@ -4912,7 +5093,7 @@ color: #343a3f; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #697077; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4943,7 +5124,7 @@ color: #343a3f; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #697077; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4957,7 +5138,7 @@ color: #343a3f; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #343a3f; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4968,7 +5149,7 @@ color: #343a3f; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #697077; } .p-menubar .p-submenu-list { @@ -4985,6 +5166,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5159,7 +5341,7 @@ color: #343a3f; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #697077; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5173,7 +5355,7 @@ color: #343a3f; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #343a3f; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5184,7 +5366,7 @@ color: #343a3f; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #697077; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5224,6 +5406,7 @@ border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; } + .p-slidemenu { padding: 0.25rem 0; background: #ffffff; @@ -5266,7 +5449,7 @@ color: #343a3f; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #697077; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5280,7 +5463,7 @@ color: #343a3f; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #343a3f; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5291,7 +5474,7 @@ color: #343a3f; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #697077; } .p-slidemenu.p-slidemenu-overlay { @@ -5338,6 +5521,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5382,6 +5566,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -5452,6 +5637,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #90c9f5; } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5502,7 +5688,7 @@ color: #343a3f; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #697077; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5516,7 +5702,7 @@ color: #343a3f; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #343a3f; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5527,7 +5713,7 @@ color: #343a3f; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #697077; } .p-tieredmenu .p-menuitem-separator { @@ -5541,6 +5727,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.25rem 0.25rem; margin: 0; @@ -5596,6 +5783,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 1px; @@ -5684,6 +5872,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5734,7 +5923,7 @@ color: #08576a; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #08576a; } .p-toast .p-toast-message.p-toast-message-success { @@ -5744,7 +5933,7 @@ color: #196310; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #196310; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5754,7 +5943,7 @@ color: #726203; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #726203; } .p-toast .p-toast-message.p-toast-message-error { @@ -5764,9 +5953,10 @@ color: #6f2205; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #6f2205; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5797,7 +5987,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5854,7 +6044,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f2f4f8; @@ -5864,7 +6054,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f2f4f8; } @@ -5873,23 +6063,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5913,6 +6109,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #dee2e6; border-radius: 1px; @@ -5933,9 +6130,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #1174c0; color: #ffffff; @@ -5977,6 +6176,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #dee2e6; color: #343a3f; @@ -6012,6 +6212,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.25rem 0.25rem; border-radius: 1px; @@ -6026,6 +6227,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6041,6 +6243,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 2rem; height: 2rem; @@ -6062,6 +6265,7 @@ width: 1rem; height: 1rem; } + .p-skeleton { background-color: #dde1e6; border-radius: 1px; @@ -6069,6 +6273,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #1174c0; color: #ffffff; @@ -6101,6 +6306,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #343a3f; diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css index 8c1f08d2627..eb6d8831d8d 100644 --- a/src/assets/components/themes/nova-accent/theme.css +++ b/src/assets/components/themes/nova-accent/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.5; } + .p-error { color: #a80000; } + .p-text-secondary { color: #848484; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .p-autocomplete-panel { background: #ffffff; color: #333333; @@ -427,9 +440,11 @@ color: #333333; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #a80000; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 1.858rem; } @@ -437,19 +452,23 @@ color: #848484; right: 0.429rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #848484; right: 2.786rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #a80000; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -476,7 +495,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #a6a6a6; @@ -486,13 +505,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #333333; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #007ad9; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 1.858rem; } @@ -664,10 +684,12 @@ color: #848484; right: 0.429rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #848484; right: 2.786rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0.25rem; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #a80000; } + .p-cascadeselect-panel { background: #ffffff; color: #333333; @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f4f4f4; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #a80000; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.429rem; } @@ -768,6 +794,7 @@ color: #848484; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #005b9f; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a80000; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } @@ -831,12 +861,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #005b9f; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a80000; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #212121; } @@ -875,9 +908,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #a80000; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.429rem; } @@ -885,22 +920,26 @@ color: #848484; right: 0.429rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { background: #ffffff; border: 1px solid #a6a6a6; @@ -944,6 +983,7 @@ .p-dropdown.p-invalid.p-component { border-color: #a80000; } + .p-dropdown-panel { background: #ffffff; color: #333333; @@ -1007,6 +1047,7 @@ color: #333333; background: transparent; } + .p-input-filled .p-dropdown { background: #f4f4f4; } @@ -1019,9 +1060,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #a80000; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1034,60 +1083,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #a6a6a6; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #848484; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #848484; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a80000; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 1.858rem; } @@ -1095,9 +1162,11 @@ color: #848484; right: 0.429rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #a80000; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 1.858rem; } @@ -1105,12 +1174,14 @@ color: #848484; right: 0.429rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.786rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.786rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1149,9 +1220,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #116fbf; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #a80000; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1184,45 +1257,57 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-float-label > label { left: 0.429rem; color: #666666; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #a80000; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.429rem; color: #848484; } + .p-input-icon-left > .p-inputtext { padding-left: 1.858rem; } + .p-input-icon-left.p-float-label > label { left: 1.858rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.429rem; color: #848484; } + .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + ::-webkit-input-placeholder { color: #666666; } + :-moz-placeholder { color: #666666; } + ::-moz-placeholder { color: #666666; } + :-ms-input-placeholder { color: #666666; } + .p-input-filled .p-inputtext { background-color: #f4f4f4; } @@ -1232,14 +1317,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #f4f4f4; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox { background: #ffffff; color: #333333; @@ -1314,9 +1402,11 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #a80000; } + .p-multiselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1356,9 +1446,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.429rem; } @@ -1366,6 +1458,7 @@ color: #848484; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #333333; @@ -1454,6 +1547,7 @@ color: #333333; background: transparent; } + .p-input-filled .p-multiselect { background: #f4f4f4; } @@ -1463,12 +1557,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #a80000; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #a80000; } + .p-password-panel { padding: 0.571rem 1rem; background: #ffffff; @@ -1490,6 +1587,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #34a835; } + p-password.p-password-clearable .p-password-input { padding-right: 1.858rem; } @@ -1497,6 +1595,7 @@ color: #848484; right: 0.429rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.287rem; } @@ -1504,6 +1603,7 @@ color: #848484; right: 1.858rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1541,9 +1641,11 @@ background: #005b9f; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #a80000; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } @@ -1556,9 +1658,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #005b9f; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1589,6 +1693,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b5019f; } + .p-selectbutton .p-button { background: #dadada; border: 1px solid #dadada; @@ -1596,7 +1701,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #666666; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1605,7 +1710,7 @@ color: #333333; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #212121; } .p-selectbutton .p-button.p-highlight { @@ -1614,7 +1719,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1623,12 +1728,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #a80000; } + .p-slider { background: #c8c8c8; border: 0 none; @@ -1680,6 +1787,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #dadada; border: 1px solid #dadada; @@ -1687,7 +1795,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #666666; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1696,7 +1804,7 @@ color: #333333; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #212121; } .p-togglebutton.p-button.p-highlight { @@ -1705,7 +1813,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1714,12 +1822,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #a80000; } + .p-treeselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1756,12 +1866,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #a80000; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.2145rem 0.429rem; } + .p-treeselect-panel { background: #ffffff; color: #333333; @@ -1821,6 +1934,7 @@ color: #333333; background: transparent; } + .p-input-filled .p-treeselect { background: #f4f4f4; } @@ -1830,6 +1944,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.429rem; } @@ -1837,6 +1952,7 @@ color: #848484; right: 2.357rem; } + .p-button { color: #ffffff; background: #007ad9; @@ -1948,7 +2064,7 @@ padding: 0.429rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1975,426 +2091,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607d8b; border: 1px solid #607d8b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #546e7a; color: #ffffff; border-color: #546e7a; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #b0bec5; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #455a64; color: #ffffff; border-color: #455a64; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(96, 125, 139, 0.16); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #607d8b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607d8b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607d8b; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #007ad9; border: 1px solid #007ad9; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #116fbf; color: #ffffff; border-color: #116fbf; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #8dcdff; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #005b9f; color: #ffffff; border-color: #005b9f; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #007ad9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(0, 122, 217, 0.04); color: #007ad9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(0, 122, 217, 0.16); color: #007ad9; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #007ad9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(0, 122, 217, 0.04); border-color: transparent; color: #007ad9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(0, 122, 217, 0.16); border-color: transparent; color: #007ad9; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #34a835; border: 1px solid #34a835; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #107d11; color: #ffffff; border-color: #107d11; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #aae5aa; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #0c6b0d; color: #ffffff; border-color: #0c6b0d; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #34a835; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(52, 168, 53, 0.04); color: #34a835; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(52, 168, 53, 0.16); color: #34a835; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #34a835; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(52, 168, 53, 0.04); border-color: transparent; color: #34a835; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(52, 168, 53, 0.16); border-color: transparent; color: #34a835; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #333333; background: #ffba01; border: 1px solid #ffba01; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ed990b; color: #333333; border-color: #ed990b; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ffeab4; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #d38b10; color: #333333; border-color: #d38b10; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffba01; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 186, 1, 0.04); color: #ffba01; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 186, 1, 0.16); color: #ffba01; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffba01; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 186, 1, 0.04); border-color: transparent; color: #ffba01; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 186, 1, 0.16); border-color: transparent; color: #ffba01; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 1px solid #9c27b0; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #8e24aa; color: #ffffff; border-color: #8e24aa; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ce93d8; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7b1fa2; color: #ffffff; border-color: #7b1fa2; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #e91224; border: 1px solid #e91224; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c01120; color: #ffffff; border-color: #c01120; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #f9b4ba; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #a90000; color: #ffffff; border-color: #a90000; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #e91224; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(233, 18, 36, 0.04); color: #e91224; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(233, 18, 36, 0.16); color: #e91224; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #e91224; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(233, 18, 36, 0.04); border-color: transparent; color: #e91224; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(233, 18, 36, 0.16); border-color: transparent; color: #e91224; } + .p-button.p-button-link { color: #005b9f; background: transparent; @@ -2418,6 +2542,7 @@ color: #005b9f; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2429,14 +2554,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2447,45 +2575,52 @@ background: #222c31; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2563,6 +2698,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #607d8b; @@ -2591,6 +2727,7 @@ border-color: transparent; color: #607d8b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #007ad9; @@ -2619,6 +2756,7 @@ border-color: transparent; color: #007ad9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #34a835; @@ -2647,6 +2785,7 @@ border-color: transparent; color: #34a835; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffba01; @@ -2675,6 +2814,7 @@ border-color: transparent; color: #ffba01; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2703,6 +2843,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #e91224; @@ -2731,8 +2872,9 @@ border-color: transparent; color: #e91224; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #a6a6a6; @@ -2743,13 +2885,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -2775,6 +2917,7 @@ background: #e02365; color: #ffffff; } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2868,9 +3011,9 @@ padding: 0.571rem 0.857rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #a6a6a6; @@ -2880,17 +3023,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -2920,12 +3063,12 @@ background: #007ad9; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #007ad9; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f4f4f4; } .p-datatable .p-datatable-loading-icon { @@ -3028,6 +3171,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.71375rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3066,10 +3210,12 @@ .p-dataview .p-dataview-emptymessage { padding: 0.571rem 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3097,6 +3243,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3116,6 +3263,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-column-filter-overlay { background: #ffffff; color: #333333; @@ -3153,6 +3301,7 @@ border-top: 1px solid #d8dae2; margin: 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.429rem 0.857rem; border-bottom: 1px solid #eaeaea; @@ -3181,6 +3330,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.571rem 1rem; } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -3266,6 +3416,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #eaeaea; } + .p-orderlist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3274,6 +3425,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #eaeaea; color: #333333; @@ -3312,6 +3464,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-paginator { background: #f4f4f4; color: #333333; @@ -3321,9 +3474,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #848484; @@ -3334,9 +3487,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; border-color: transparent; color: #333333; @@ -3393,6 +3546,7 @@ border-color: transparent; color: #333333; } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } @@ -3478,6 +3632,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #eaeaea; } + .p-picklist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3486,6 +3641,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3497,19 +3653,20 @@ background-color: #c8c8c8; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #c8c8c8; background: #ffffff; @@ -3566,11 +3723,11 @@ color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3643,6 +3800,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3782,7 +3940,7 @@ background: #007ad9; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #007ad9; } .p-treetable .p-treetable-loading-icon { @@ -3843,6 +4001,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.71375rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #007ad9; color: #ffffff; @@ -3867,6 +4026,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #007ad9; @@ -3915,6 +4075,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 2px; } + .p-card { background: #ffffff; color: #333333; @@ -3940,6 +4101,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3963,6 +4125,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #c8c8c8; background: #ffffff; @@ -4003,6 +4166,7 @@ .p-fieldset .p-fieldset-content { padding: 0.571rem 1rem; } + .p-panel .p-panel-header { border: 1px solid #007ad9; padding: 0.857rem 1rem; @@ -4069,6 +4233,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; @@ -4079,6 +4244,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-splitter { border: 1px solid #c8c8c8; background: #ffffff; @@ -4100,6 +4266,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #d8dae2; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4168,6 +4335,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #007ad9; border: 1px solid #007ad9; @@ -4178,6 +4346,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #333333; @@ -4225,6 +4394,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -4297,6 +4467,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #333333; @@ -4338,6 +4509,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #c8c8c8; } + .p-sidebar { background: #ffffff; color: #333333; @@ -4348,7 +4520,7 @@ padding: 0.857rem 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #a6a6a6; @@ -4358,13 +4530,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -4378,6 +4550,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.857rem 1rem; } + .p-tooltip .p-tooltip-text { background: #333333; color: #ffffff; @@ -4397,6 +4570,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #333333; } + .p-fileupload .p-fileupload-buttonbar { background: #007ad9; padding: 0.857rem 1rem; @@ -4436,6 +4610,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #116fbf; color: #ffffff; @@ -4446,6 +4621,7 @@ color: #ffffff; border-color: #005b9f; } + .p-breadcrumb { background: #ffffff; border: 1px solid #c8c8c8; @@ -4477,6 +4653,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #333333; } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4524,7 +4701,7 @@ color: #333333; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4538,7 +4715,7 @@ color: #333333; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4549,7 +4726,7 @@ color: #333333; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-contextmenu .p-menuitem-separator { @@ -4563,6 +4740,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4586,31 +4764,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4669,7 +4848,7 @@ color: #333333; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4683,7 +4862,7 @@ color: #333333; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4694,7 +4873,7 @@ color: #333333; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-megamenu .p-megamenu-panel { @@ -4752,9 +4931,10 @@ color: #333333; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } + .p-menu { padding: 0; background: #ffffff; @@ -4791,7 +4971,7 @@ color: #333333; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4805,7 +4985,7 @@ color: #333333; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4816,7 +4996,7 @@ color: #333333; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menu.p-menu-overlay { @@ -4850,6 +5030,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4888,7 +5069,7 @@ color: #333333; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4919,7 +5100,7 @@ color: #333333; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4933,7 +5114,7 @@ color: #333333; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4944,7 +5125,7 @@ color: #333333; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-submenu-list { @@ -4961,6 +5142,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5135,7 +5317,7 @@ color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5149,7 +5331,7 @@ color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5160,7 +5342,7 @@ color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5176,6 +5358,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 2px; } + .p-slidemenu { padding: 0; background: #ffffff; @@ -5218,7 +5401,7 @@ color: #333333; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5232,7 +5415,7 @@ color: #333333; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5243,7 +5426,7 @@ color: #333333; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-slidemenu.p-slidemenu-overlay { @@ -5290,6 +5473,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, box-shadow 0.2s; @@ -5334,6 +5518,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -5404,6 +5589,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #8dcdff; } + .p-tieredmenu { padding: 0; background: #ffffff; @@ -5454,7 +5640,7 @@ color: #333333; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5468,7 +5654,7 @@ color: #333333; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5479,7 +5665,7 @@ color: #333333; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-tieredmenu .p-menuitem-separator { @@ -5493,6 +5679,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5548,6 +5735,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5636,6 +5824,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5686,7 +5875,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-success { @@ -5696,7 +5885,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5706,7 +5895,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-error { @@ -5716,9 +5905,10 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #212121; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5749,7 +5939,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5806,7 +5996,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #aeb6bf; @@ -5816,7 +6006,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } @@ -5825,23 +6015,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5865,6 +6061,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #c8c8c8; border-radius: 3px; @@ -5885,9 +6082,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #007ad9; color: #ffffff; @@ -5929,6 +6128,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #c8c8c8; color: #333333; @@ -5964,6 +6164,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5978,6 +6179,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-progressbar { border: 0 none; height: 24px; @@ -5993,6 +6195,7 @@ color: #ffffff; line-height: 24px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6014,6 +6217,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #eaeaea; border-radius: 3px; @@ -6021,6 +6225,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #007ad9; color: #ffffff; @@ -6053,6 +6258,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #333333; @@ -6072,6 +6278,7 @@ .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #5ab7ff; } + .p-dialog .p-dialog-header .p-dialog-header-icon { color: #ffffff; } diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css index 68a47020444..579009d6334 100644 --- a/src/assets/components/themes/nova-alt/theme.css +++ b/src/assets/components/themes/nova-alt/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.5; } + .p-error { color: #a80000; } + .p-text-secondary { color: #848484; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .p-autocomplete-panel { background: #ffffff; color: #333333; @@ -427,9 +440,11 @@ color: #333333; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #a80000; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 1.858rem; } @@ -437,19 +452,23 @@ color: #848484; right: 0.429rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #848484; right: 2.786rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #a80000; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -476,7 +495,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #a6a6a6; @@ -486,13 +505,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #333333; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #007ad9; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 1.858rem; } @@ -664,10 +684,12 @@ color: #848484; right: 0.429rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #848484; right: 2.786rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0.25rem; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #a80000; } + .p-cascadeselect-panel { background: #ffffff; color: #333333; @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f4f4f4; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #a80000; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.429rem; } @@ -768,6 +794,7 @@ color: #848484; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #005b9f; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a80000; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } @@ -831,15 +861,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #005b9f; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a80000; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #212121; } @@ -878,9 +912,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #a80000; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.429rem; } @@ -888,22 +924,26 @@ color: #848484; right: 0.429rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { background: #ffffff; border: 1px solid #a6a6a6; @@ -947,6 +987,7 @@ .p-dropdown.p-invalid.p-component { border-color: #a80000; } + .p-dropdown-panel { background: #ffffff; color: #333333; @@ -1010,6 +1051,7 @@ color: #333333; background: transparent; } + .p-input-filled .p-dropdown { background: #f4f4f4; } @@ -1022,9 +1064,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #a80000; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1037,60 +1087,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #a6a6a6; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #848484; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #848484; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a80000; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 1.858rem; } @@ -1098,9 +1166,11 @@ color: #848484; right: 0.429rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #a80000; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 1.858rem; } @@ -1108,12 +1178,14 @@ color: #848484; right: 0.429rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.786rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.786rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1152,9 +1224,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #116fbf; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #a80000; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1187,45 +1261,57 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-float-label > label { left: 0.429rem; color: #666666; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #a80000; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.429rem; color: #848484; } + .p-input-icon-left > .p-inputtext { padding-left: 1.858rem; } + .p-input-icon-left.p-float-label > label { left: 1.858rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.429rem; color: #848484; } + .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + ::-webkit-input-placeholder { color: #666666; } + :-moz-placeholder { color: #666666; } + ::-moz-placeholder { color: #666666; } + :-ms-input-placeholder { color: #666666; } + .p-input-filled .p-inputtext { background-color: #f4f4f4; } @@ -1235,14 +1321,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #f4f4f4; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox { background: #ffffff; color: #333333; @@ -1317,9 +1406,11 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #a80000; } + .p-multiselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1359,9 +1450,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.429rem; } @@ -1369,6 +1462,7 @@ color: #848484; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #333333; @@ -1457,6 +1551,7 @@ color: #333333; background: transparent; } + .p-input-filled .p-multiselect { background: #f4f4f4; } @@ -1466,12 +1561,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #a80000; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #a80000; } + .p-password-panel { padding: 0.571rem 1rem; background: #ffffff; @@ -1493,6 +1591,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #34a835; } + p-password.p-password-clearable .p-password-input { padding-right: 1.858rem; } @@ -1500,6 +1599,7 @@ color: #848484; right: 0.429rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.287rem; } @@ -1507,6 +1607,7 @@ color: #848484; right: 1.858rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1544,9 +1645,11 @@ background: #005b9f; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #a80000; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } @@ -1559,12 +1662,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #005b9f; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { gap: 0.5rem; } @@ -1595,9 +1701,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b5019f; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #ffffff; } + .p-selectbutton .p-button { background: #dadada; border: 1px solid #dadada; @@ -1605,7 +1713,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #666666; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1614,7 +1722,7 @@ color: #333333; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #212121; } .p-selectbutton .p-button.p-highlight { @@ -1623,7 +1731,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1632,12 +1740,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #a80000; } + .p-slider { background: #c8c8c8; border: 0 none; @@ -1689,6 +1799,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #dadada; border: 1px solid #dadada; @@ -1696,7 +1807,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #666666; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1705,7 +1816,7 @@ color: #333333; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #212121; } .p-togglebutton.p-button.p-highlight { @@ -1714,7 +1825,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1723,12 +1834,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #a80000; } + .p-treeselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1765,12 +1878,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #a80000; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.2145rem 0.429rem; } + .p-treeselect-panel { background: #ffffff; color: #333333; @@ -1830,6 +1946,7 @@ color: #333333; background: transparent; } + .p-input-filled .p-treeselect { background: #f4f4f4; } @@ -1839,6 +1956,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.429rem; } @@ -1846,6 +1964,7 @@ color: #848484; right: 2.357rem; } + .p-button { color: #ffffff; background: #007ad9; @@ -1957,7 +2076,7 @@ padding: 0.429rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1984,426 +2103,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607d8b; border: 1px solid #607d8b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #546e7a; color: #ffffff; border-color: #546e7a; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #b0bec5; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #455a64; color: #ffffff; border-color: #455a64; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(96, 125, 139, 0.16); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #607d8b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607d8b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607d8b; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #007ad9; border: 1px solid #007ad9; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #116fbf; color: #ffffff; border-color: #116fbf; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #8dcdff; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #005b9f; color: #ffffff; border-color: #005b9f; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #007ad9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(0, 122, 217, 0.04); color: #007ad9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(0, 122, 217, 0.16); color: #007ad9; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #007ad9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(0, 122, 217, 0.04); border-color: transparent; color: #007ad9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(0, 122, 217, 0.16); border-color: transparent; color: #007ad9; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #34a835; border: 1px solid #34a835; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #107d11; color: #ffffff; border-color: #107d11; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #aae5aa; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #0c6b0d; color: #ffffff; border-color: #0c6b0d; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #34a835; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(52, 168, 53, 0.04); color: #34a835; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(52, 168, 53, 0.16); color: #34a835; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #34a835; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(52, 168, 53, 0.04); border-color: transparent; color: #34a835; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(52, 168, 53, 0.16); border-color: transparent; color: #34a835; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #333333; background: #ffba01; border: 1px solid #ffba01; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ed990b; color: #333333; border-color: #ed990b; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ffeab4; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #d38b10; color: #333333; border-color: #d38b10; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffba01; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 186, 1, 0.04); color: #ffba01; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 186, 1, 0.16); color: #ffba01; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffba01; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 186, 1, 0.04); border-color: transparent; color: #ffba01; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 186, 1, 0.16); border-color: transparent; color: #ffba01; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 1px solid #9c27b0; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #8e24aa; color: #ffffff; border-color: #8e24aa; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ce93d8; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7b1fa2; color: #ffffff; border-color: #7b1fa2; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #e91224; border: 1px solid #e91224; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c01120; color: #ffffff; border-color: #c01120; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #f9b4ba; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #a90000; color: #ffffff; border-color: #a90000; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #e91224; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(233, 18, 36, 0.04); color: #e91224; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(233, 18, 36, 0.16); color: #e91224; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #e91224; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(233, 18, 36, 0.04); border-color: transparent; color: #e91224; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(233, 18, 36, 0.16); border-color: transparent; color: #e91224; } + .p-button.p-button-link { color: #005b9f; background: transparent; @@ -2427,6 +2554,7 @@ color: #005b9f; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2438,14 +2566,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2456,45 +2587,52 @@ background: #222c31; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2572,6 +2710,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #607d8b; @@ -2600,6 +2739,7 @@ border-color: transparent; color: #607d8b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #007ad9; @@ -2628,6 +2768,7 @@ border-color: transparent; color: #007ad9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #34a835; @@ -2656,6 +2797,7 @@ border-color: transparent; color: #34a835; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffba01; @@ -2684,6 +2826,7 @@ border-color: transparent; color: #ffba01; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2712,6 +2855,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #e91224; @@ -2740,8 +2884,9 @@ border-color: transparent; color: #e91224; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #a6a6a6; @@ -2752,13 +2897,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -2784,6 +2929,7 @@ background: #007ad9; color: #ffffff; } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2877,9 +3023,9 @@ padding: 0.571rem 0.857rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #a6a6a6; @@ -2889,17 +3035,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -2929,12 +3075,12 @@ background: #007ad9; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #333333; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f4f4f4; } .p-datatable .p-datatable-loading-icon { @@ -3037,6 +3183,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.71375rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3075,10 +3222,12 @@ .p-dataview .p-dataview-emptymessage { padding: 0.571rem 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3106,6 +3255,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3125,6 +3275,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-column-filter-overlay { background: #ffffff; color: #333333; @@ -3162,6 +3313,7 @@ border-top: 1px solid #d8dae2; margin: 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.429rem 0.857rem; border-bottom: 1px solid #eaeaea; @@ -3190,6 +3342,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.571rem 1rem; } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -3275,6 +3428,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #eaeaea; } + .p-orderlist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3283,6 +3437,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #eaeaea; color: #333333; @@ -3321,6 +3476,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-paginator { background: #f4f4f4; color: #333333; @@ -3330,9 +3486,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #848484; @@ -3343,9 +3499,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; border-color: transparent; color: #333333; @@ -3402,6 +3558,7 @@ border-color: transparent; color: #333333; } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } @@ -3487,6 +3644,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #eaeaea; } + .p-picklist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3495,6 +3653,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3506,19 +3665,20 @@ background-color: #c8c8c8; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #c8c8c8; background: #ffffff; @@ -3575,11 +3735,11 @@ color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3652,6 +3812,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3791,7 +3952,7 @@ background: #007ad9; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #333333; } .p-treetable .p-treetable-loading-icon { @@ -3852,6 +4013,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.71375rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #333333; color: #ffffff; @@ -3876,6 +4038,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #333333; @@ -3924,6 +4087,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 2px; } + .p-card { background: #ffffff; color: #333333; @@ -3949,6 +4113,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3972,6 +4137,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #c8c8c8; background: #ffffff; @@ -4012,6 +4178,7 @@ .p-fieldset .p-fieldset-content { padding: 0.571rem 1rem; } + .p-panel .p-panel-header { border: 1px solid #333333; padding: 0.857rem 1rem; @@ -4078,6 +4245,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; @@ -4088,6 +4256,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-splitter { border: 1px solid #c8c8c8; background: #ffffff; @@ -4109,6 +4278,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #d8dae2; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4177,6 +4347,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #333333; border: 1px solid #333333; @@ -4187,6 +4358,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #333333; @@ -4234,6 +4406,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -4306,6 +4479,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #333333; @@ -4347,6 +4521,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #c8c8c8; } + .p-sidebar { background: #ffffff; color: #333333; @@ -4357,7 +4532,7 @@ padding: 0.857rem 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #a6a6a6; @@ -4367,13 +4542,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -4387,6 +4562,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.857rem 1rem; } + .p-tooltip .p-tooltip-text { background: #333333; color: #ffffff; @@ -4406,6 +4582,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #333333; } + .p-fileupload .p-fileupload-buttonbar { background: #333333; padding: 0.857rem 1rem; @@ -4445,6 +4622,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #116fbf; color: #ffffff; @@ -4455,6 +4633,7 @@ color: #ffffff; border-color: #005b9f; } + .p-breadcrumb { background: #ffffff; border: 1px solid #c8c8c8; @@ -4486,6 +4665,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #333333; } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4533,7 +4713,7 @@ color: #333333; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4547,7 +4727,7 @@ color: #333333; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4558,7 +4738,7 @@ color: #333333; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-contextmenu .p-menuitem-separator { @@ -4572,6 +4752,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4595,31 +4776,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4678,7 +4860,7 @@ color: #333333; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4692,7 +4874,7 @@ color: #333333; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4703,7 +4885,7 @@ color: #333333; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-megamenu .p-megamenu-panel { @@ -4761,9 +4943,10 @@ color: #333333; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } + .p-menu { padding: 0; background: #ffffff; @@ -4800,7 +4983,7 @@ color: #333333; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4814,7 +4997,7 @@ color: #333333; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4825,7 +5008,7 @@ color: #333333; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menu.p-menu-overlay { @@ -4859,6 +5042,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4897,7 +5081,7 @@ color: #333333; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4928,7 +5112,7 @@ color: #333333; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4942,7 +5126,7 @@ color: #333333; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4953,7 +5137,7 @@ color: #333333; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-submenu-list { @@ -4970,6 +5154,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5144,7 +5329,7 @@ color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5158,7 +5343,7 @@ color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5169,7 +5354,7 @@ color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5185,6 +5370,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 2px; } + .p-slidemenu { padding: 0; background: #ffffff; @@ -5227,7 +5413,7 @@ color: #333333; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5241,7 +5427,7 @@ color: #333333; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5252,7 +5438,7 @@ color: #333333; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-slidemenu.p-slidemenu-overlay { @@ -5299,6 +5485,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, box-shadow 0.2s; @@ -5343,6 +5530,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -5413,6 +5601,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #8dcdff; } + .p-tieredmenu { padding: 0; background: #ffffff; @@ -5463,7 +5652,7 @@ color: #333333; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5477,7 +5666,7 @@ color: #333333; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5488,7 +5677,7 @@ color: #333333; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-tieredmenu .p-menuitem-separator { @@ -5502,6 +5691,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5557,6 +5747,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5645,6 +5836,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5695,7 +5887,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-success { @@ -5705,7 +5897,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5715,7 +5907,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-error { @@ -5725,9 +5917,10 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #212121; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5758,7 +5951,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5815,7 +6008,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #aeb6bf; @@ -5825,7 +6018,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } @@ -5834,23 +6027,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5874,6 +6073,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #c8c8c8; border-radius: 3px; @@ -5894,9 +6094,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #007ad9; color: #ffffff; @@ -5938,6 +6140,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #c8c8c8; color: #333333; @@ -5973,6 +6176,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5987,6 +6191,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-progressbar { border: 0 none; height: 24px; @@ -6002,6 +6207,7 @@ color: #ffffff; line-height: 24px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6023,6 +6229,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #eaeaea; border-radius: 3px; @@ -6030,6 +6237,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #007ad9; color: #ffffff; @@ -6062,6 +6270,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #333333; @@ -6081,6 +6290,7 @@ .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #b4b4b4; } + .p-dialog .p-dialog-header .p-dialog-header-icon { color: #ffffff; } diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css index f6cfec9f38b..3d38d4e5c01 100644 --- a/src/assets/components/themes/nova/theme.css +++ b/src/assets/components/themes/nova/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.5; } + .p-error { color: #a80000; } + .p-text-secondary { color: #848484; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #a80000; } + .p-autocomplete-panel { background: #ffffff; color: #333333; @@ -427,9 +440,11 @@ color: #333333; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #a80000; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 1.858rem; } @@ -437,19 +452,23 @@ color: #848484; right: 0.429rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #848484; right: 2.786rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #a80000; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -476,7 +495,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #a6a6a6; @@ -486,13 +505,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #333333; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #007ad9; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 1.858rem; } @@ -664,10 +684,12 @@ color: #848484; right: 0.429rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #848484; right: 2.786rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0.25rem; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #a80000; } + .p-cascadeselect-panel { background: #ffffff; color: #333333; @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f4f4f4; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #a80000; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.429rem; } @@ -768,6 +794,7 @@ color: #848484; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #005b9f; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a80000; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } @@ -831,15 +861,19 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #005b9f; } + .p-checkbox-label { margin-left: 0.5rem; } + .p-highlight .p-checkbox .p-checkbox-box { border-color: #ffffff; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a80000; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #212121; } @@ -878,9 +912,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #a80000; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.429rem; } @@ -888,22 +924,26 @@ color: #848484; right: 0.429rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { background: #ffffff; border: 1px solid #a6a6a6; @@ -947,6 +987,7 @@ .p-dropdown.p-invalid.p-component { border-color: #a80000; } + .p-dropdown-panel { background: #ffffff; color: #333333; @@ -1010,6 +1051,7 @@ color: #333333; background: transparent; } + .p-input-filled .p-dropdown { background: #f4f4f4; } @@ -1022,9 +1064,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #a80000; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1037,60 +1087,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #a6a6a6; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #848484; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #848484; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a80000; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 1.858rem; } @@ -1098,9 +1166,11 @@ color: #848484; right: 0.429rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #a80000; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 1.858rem; } @@ -1108,12 +1178,14 @@ color: #848484; right: 0.429rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.786rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.786rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1152,9 +1224,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #116fbf; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #a80000; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1187,45 +1261,57 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-float-label > label { left: 0.429rem; color: #666666; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #a80000; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.429rem; color: #848484; } + .p-input-icon-left > .p-inputtext { padding-left: 1.858rem; } + .p-input-icon-left.p-float-label > label { left: 1.858rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.429rem; color: #848484; } + .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + ::-webkit-input-placeholder { color: #666666; } + :-moz-placeholder { color: #666666; } + ::-moz-placeholder { color: #666666; } + :-ms-input-placeholder { color: #666666; } + .p-input-filled .p-inputtext { background-color: #f4f4f4; } @@ -1235,14 +1321,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #f4f4f4; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox { background: #ffffff; color: #333333; @@ -1317,9 +1406,11 @@ box-shadow: 0 0 0 0.2rem #8dcdff; border-color: #007ad9; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #a80000; } + .p-multiselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1359,9 +1450,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.429rem; } @@ -1369,6 +1462,7 @@ color: #848484; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #333333; @@ -1457,6 +1551,7 @@ color: #333333; background: transparent; } + .p-input-filled .p-multiselect { background: #f4f4f4; } @@ -1466,12 +1561,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #a80000; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #a80000; } + .p-password-panel { padding: 0.571rem 1rem; background: #ffffff; @@ -1493,6 +1591,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #34a835; } + p-password.p-password-clearable .p-password-input { padding-right: 1.858rem; } @@ -1500,6 +1599,7 @@ color: #848484; right: 0.429rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.287rem; } @@ -1507,6 +1607,7 @@ color: #848484; right: 1.858rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1544,9 +1645,11 @@ background: #005b9f; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #a80000; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } @@ -1559,12 +1662,15 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #005b9f; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-highlight .p-radiobutton .p-radiobutton-box { border-color: #ffffff; } + .p-rating { gap: 0.5rem; } @@ -1595,9 +1701,11 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b5019f; } + .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { color: #ffffff; } + .p-selectbutton .p-button { background: #dadada; border: 1px solid #dadada; @@ -1605,7 +1713,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #666666; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1614,7 +1722,7 @@ color: #333333; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #212121; } .p-selectbutton .p-button.p-highlight { @@ -1623,7 +1731,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1632,12 +1740,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #a80000; } + .p-slider { background: #c8c8c8; border: 0 none; @@ -1689,6 +1799,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #dadada; border: 1px solid #dadada; @@ -1696,7 +1807,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #666666; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1705,7 +1816,7 @@ color: #333333; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #212121; } .p-togglebutton.p-button.p-highlight { @@ -1714,7 +1825,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1723,12 +1834,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #a80000; } + .p-treeselect { background: #ffffff; border: 1px solid #a6a6a6; @@ -1765,12 +1878,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #a80000; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.2145rem 0.429rem; } + .p-treeselect-panel { background: #ffffff; color: #333333; @@ -1830,6 +1946,7 @@ color: #333333; background: transparent; } + .p-input-filled .p-treeselect { background: #f4f4f4; } @@ -1839,6 +1956,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.429rem; } @@ -1846,6 +1964,7 @@ color: #848484; right: 2.357rem; } + .p-button { color: #ffffff; background: #007ad9; @@ -1957,7 +2076,7 @@ padding: 0.429rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1984,426 +2103,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607d8b; border: 1px solid #607d8b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #546e7a; color: #ffffff; border-color: #546e7a; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #b0bec5; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #455a64; color: #ffffff; border-color: #455a64; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(96, 125, 139, 0.16); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #607d8b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607d8b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607d8b; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #007ad9; border: 1px solid #007ad9; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #116fbf; color: #ffffff; border-color: #116fbf; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #8dcdff; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #005b9f; color: #ffffff; border-color: #005b9f; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #007ad9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(0, 122, 217, 0.04); color: #007ad9; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(0, 122, 217, 0.16); color: #007ad9; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #007ad9; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(0, 122, 217, 0.04); border-color: transparent; color: #007ad9; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(0, 122, 217, 0.16); border-color: transparent; color: #007ad9; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #34a835; border: 1px solid #34a835; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #107d11; color: #ffffff; border-color: #107d11; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #aae5aa; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #0c6b0d; color: #ffffff; border-color: #0c6b0d; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #34a835; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(52, 168, 53, 0.04); color: #34a835; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(52, 168, 53, 0.16); color: #34a835; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #34a835; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(52, 168, 53, 0.04); border-color: transparent; color: #34a835; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(52, 168, 53, 0.16); border-color: transparent; color: #34a835; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #333333; background: #ffba01; border: 1px solid #ffba01; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ed990b; color: #333333; border-color: #ed990b; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ffeab4; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #d38b10; color: #333333; border-color: #d38b10; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffba01; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 186, 1, 0.04); color: #ffba01; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 186, 1, 0.16); color: #ffba01; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffba01; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 186, 1, 0.04); border-color: transparent; color: #ffba01; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 186, 1, 0.16); border-color: transparent; color: #ffba01; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 1px solid #9c27b0; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #8e24aa; color: #ffffff; border-color: #8e24aa; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ce93d8; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7b1fa2; color: #ffffff; border-color: #7b1fa2; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #e91224; border: 1px solid #e91224; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c01120; color: #ffffff; border-color: #c01120; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #f9b4ba; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #a90000; color: #ffffff; border-color: #a90000; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #e91224; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(233, 18, 36, 0.04); color: #e91224; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(233, 18, 36, 0.16); color: #e91224; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #e91224; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(233, 18, 36, 0.04); border-color: transparent; color: #e91224; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(233, 18, 36, 0.16); border-color: transparent; color: #e91224; } + .p-button.p-button-link { color: #005b9f; background: transparent; @@ -2427,6 +2554,7 @@ color: #005b9f; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2438,14 +2566,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2456,45 +2587,52 @@ background: #222c31; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2572,6 +2710,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #607d8b; @@ -2600,6 +2739,7 @@ border-color: transparent; color: #607d8b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #007ad9; @@ -2628,6 +2768,7 @@ border-color: transparent; color: #007ad9; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #34a835; @@ -2656,6 +2797,7 @@ border-color: transparent; color: #34a835; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffba01; @@ -2684,6 +2826,7 @@ border-color: transparent; color: #ffba01; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2712,6 +2855,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #e91224; @@ -2740,8 +2884,9 @@ border-color: transparent; color: #e91224; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #a6a6a6; @@ -2752,13 +2897,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -2784,6 +2929,7 @@ background: #007ad9; color: #ffffff; } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2877,9 +3023,9 @@ padding: 0.571rem 0.857rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #a6a6a6; @@ -2889,17 +3035,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -2929,12 +3075,12 @@ background: #007ad9; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f4f4f4; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f4f4f4; } .p-datatable .p-datatable-loading-icon { @@ -3037,6 +3183,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.71375rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3075,10 +3222,12 @@ .p-dataview .p-dataview-emptymessage { padding: 0.571rem 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3106,6 +3255,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3125,6 +3275,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-column-filter-overlay { background: #ffffff; color: #333333; @@ -3162,6 +3313,7 @@ border-top: 1px solid #d8dae2; margin: 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.429rem 0.857rem; border-bottom: 1px solid #eaeaea; @@ -3190,6 +3342,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.571rem 1rem; } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -3275,6 +3428,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #eaeaea; } + .p-orderlist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3283,6 +3437,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #eaeaea; color: #333333; @@ -3321,6 +3476,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-paginator { background: #f4f4f4; color: #333333; @@ -3330,9 +3486,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #848484; @@ -3343,9 +3499,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e0e0e0; border-color: transparent; color: #333333; @@ -3402,6 +3558,7 @@ border-color: transparent; color: #333333; } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } @@ -3487,6 +3644,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #eaeaea; } + .p-picklist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); @@ -3495,6 +3653,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3506,19 +3665,20 @@ background-color: #c8c8c8; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #c8c8c8; background: #ffffff; @@ -3575,11 +3735,11 @@ color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #ffffff; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3652,6 +3812,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3791,7 +3952,7 @@ background: #007ad9; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f4f4f4; } .p-treetable .p-treetable-loading-icon { @@ -3852,6 +4013,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.71375rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f4f4f4; color: #333333; @@ -3876,6 +4038,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #c8c8c8; @@ -3924,6 +4087,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 2px; } + .p-card { background: #ffffff; color: #333333; @@ -3949,6 +4113,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3972,6 +4137,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #c8c8c8; background: #ffffff; @@ -4012,6 +4178,7 @@ .p-fieldset .p-fieldset-content { padding: 0.571rem 1rem; } + .p-panel .p-panel-header { border: 1px solid #c8c8c8; padding: 0.857rem 1rem; @@ -4078,6 +4245,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; @@ -4088,6 +4256,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-splitter { border: 1px solid #c8c8c8; background: #ffffff; @@ -4109,6 +4278,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #d8dae2; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4177,6 +4347,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #f4f4f4; border: 1px solid #c8c8c8; @@ -4187,6 +4358,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #333333; @@ -4234,6 +4406,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -4306,6 +4479,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #333333; @@ -4347,6 +4521,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #c8c8c8; } + .p-sidebar { background: #ffffff; color: #333333; @@ -4357,7 +4532,7 @@ padding: 0.857rem 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #a6a6a6; @@ -4367,13 +4542,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #007ad9; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; @@ -4387,6 +4562,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.857rem 1rem; } + .p-tooltip .p-tooltip-text { background: #333333; color: #ffffff; @@ -4406,6 +4582,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #333333; } + .p-fileupload .p-fileupload-buttonbar { background: #f4f4f4; padding: 0.857rem 1rem; @@ -4445,6 +4622,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #116fbf; color: #ffffff; @@ -4455,6 +4633,7 @@ color: #ffffff; border-color: #005b9f; } + .p-breadcrumb { background: #ffffff; border: 1px solid #c8c8c8; @@ -4486,6 +4665,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #333333; } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4533,7 +4713,7 @@ color: #333333; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4547,7 +4727,7 @@ color: #333333; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4558,7 +4738,7 @@ color: #333333; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-contextmenu .p-menuitem-separator { @@ -4572,6 +4752,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4595,31 +4776,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4678,7 +4860,7 @@ color: #333333; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4692,7 +4874,7 @@ color: #333333; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4703,7 +4885,7 @@ color: #333333; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-megamenu .p-megamenu-panel { @@ -4761,9 +4943,10 @@ color: #333333; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } + .p-menu { padding: 0; background: #ffffff; @@ -4800,7 +4983,7 @@ color: #333333; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4814,7 +4997,7 @@ color: #333333; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4825,7 +5008,7 @@ color: #333333; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menu.p-menu-overlay { @@ -4859,6 +5042,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4897,7 +5081,7 @@ color: #333333; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4928,7 +5112,7 @@ color: #333333; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4942,7 +5126,7 @@ color: #333333; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4953,7 +5137,7 @@ color: #333333; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-menubar .p-submenu-list { @@ -4970,6 +5154,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5144,7 +5329,7 @@ color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5158,7 +5343,7 @@ color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5169,7 +5354,7 @@ color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5185,6 +5370,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 2px; } + .p-slidemenu { padding: 0; background: #ffffff; @@ -5227,7 +5413,7 @@ color: #333333; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5241,7 +5427,7 @@ color: #333333; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5252,7 +5438,7 @@ color: #333333; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-slidemenu.p-slidemenu-overlay { @@ -5299,6 +5485,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, box-shadow 0.2s; @@ -5343,6 +5530,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -5413,6 +5601,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #8dcdff; } + .p-tieredmenu { padding: 0; background: #ffffff; @@ -5463,7 +5652,7 @@ color: #333333; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5477,7 +5666,7 @@ color: #333333; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #333333; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5488,7 +5677,7 @@ color: #333333; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #333333; } .p-tieredmenu .p-menuitem-separator { @@ -5502,6 +5691,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5557,6 +5747,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5645,6 +5836,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5695,7 +5887,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-success { @@ -5705,7 +5897,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5715,7 +5907,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-error { @@ -5725,9 +5917,10 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #212121; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5758,7 +5951,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5815,7 +6008,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #aeb6bf; @@ -5825,7 +6018,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } @@ -5834,23 +6027,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5874,6 +6073,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #c8c8c8; border-radius: 3px; @@ -5894,9 +6094,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #007ad9; color: #ffffff; @@ -5938,6 +6140,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #c8c8c8; color: #333333; @@ -5973,6 +6176,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 3px; @@ -5987,6 +6191,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-progressbar { border: 0 none; height: 24px; @@ -6002,6 +6207,7 @@ color: #ffffff; line-height: 24px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6023,6 +6229,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #eaeaea; border-radius: 3px; @@ -6030,6 +6237,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #007ad9; color: #ffffff; @@ -6062,6 +6270,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #333333; @@ -6081,6 +6290,7 @@ .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #333333; } + .p-dialog .p-dialog-header .p-dialog-header-icon { color: #848484; } diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css index 10db8c1efdd..541b007dbd2 100644 --- a/src/assets/components/themes/rhea/theme.css +++ b/src/assets/components/themes/rhea/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.5; } + .p-error { color: #e7a3a3; } + .p-text-secondary { color: #a6a6a6; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.429rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #e7a3a3; } + .p-autocomplete-panel { background: #ffffff; color: #666666; @@ -427,9 +440,11 @@ color: #666666; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #e7a3a3; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 1.858rem; } @@ -437,19 +452,23 @@ color: #a6a6a6; right: 0.429rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #a6a6a6; right: 2.786rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #e7a3a3; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; border-color: #7b95a3; } + .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -476,7 +495,7 @@ border-top-left-radius: 2px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #a6a6a6; @@ -486,13 +505,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #666666; border-color: transparent; background: transparent; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #666666; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #7b95a3; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 1.858rem; } @@ -664,10 +684,12 @@ color: #a6a6a6; right: 0.429rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #a6a6a6; right: 2.786rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0.25rem; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e7a3a3; } + .p-cascadeselect-panel { background: #ffffff; color: #666666; @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f4f4f4; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #e7a3a3; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.429rem; } @@ -768,6 +794,7 @@ color: #a6a6a6; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #617c8a; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e7a3a3; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f4f4f4; } @@ -831,12 +861,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #617c8a; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e7a3a3; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #a6a6a6; } @@ -875,9 +908,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #e7a3a3; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.429rem; } @@ -885,22 +920,26 @@ color: #a6a6a6; right: 0.429rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); } + .p-dropdown { background: #ffffff; border: 1px solid #dadada; @@ -944,6 +983,7 @@ .p-dropdown.p-invalid.p-component { border-color: #e7a3a3; } + .p-dropdown-panel { background: #ffffff; color: #666666; @@ -1007,6 +1047,7 @@ color: #666666; background: transparent; } + .p-input-filled .p-dropdown { background: #f4f4f4; } @@ -1019,9 +1060,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #e7a3a3; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #dbdbdb; color: #666666; @@ -1034,60 +1083,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #dadada; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #a6a6a6; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #a6a6a6; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e7a3a3; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 1.858rem; } @@ -1095,9 +1162,11 @@ color: #a6a6a6; right: 0.429rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e7a3a3; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 1.858rem; } @@ -1105,12 +1174,14 @@ color: #a6a6a6; right: 0.429rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.786rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.786rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1149,9 +1220,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #afd3c8; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e7a3a3; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1184,45 +1257,57 @@ font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-float-label > label { left: 0.429rem; color: #a6a6a6; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #e7a3a3; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.429rem; color: #a6a6a6; } + .p-input-icon-left > .p-inputtext { padding-left: 1.858rem; } + .p-input-icon-left.p-float-label > label { left: 1.858rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.429rem; color: #a6a6a6; } + .p-input-icon-right > .p-inputtext { padding-right: 1.858rem; } + ::-webkit-input-placeholder { color: #a6a6a6; } + :-moz-placeholder { color: #a6a6a6; } + ::-moz-placeholder { color: #a6a6a6; } + :-ms-input-placeholder { color: #a6a6a6; } + .p-input-filled .p-inputtext { background-color: #f4f4f4; } @@ -1232,14 +1317,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #f4f4f4; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.53625rem 0.53625rem; } + .p-listbox { background: #ffffff; color: #666666; @@ -1314,9 +1402,11 @@ box-shadow: 0 0 0 0.2rem #e4e9ec; border-color: #7b95a3; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #e7a3a3; } + .p-multiselect { background: #ffffff; border: 1px solid #dadada; @@ -1356,9 +1446,11 @@ border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.429rem; } @@ -1366,6 +1458,7 @@ color: #a6a6a6; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #666666; @@ -1454,6 +1547,7 @@ color: #666666; background: transparent; } + .p-input-filled .p-multiselect { background: #f4f4f4; } @@ -1463,12 +1557,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #e7a3a3; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #e7a3a3; } + .p-password-panel { padding: 0.571rem 1rem; background: #ffffff; @@ -1490,6 +1587,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #a3e2c6; } + p-password.p-password-clearable .p-password-input { padding-right: 1.858rem; } @@ -1497,6 +1595,7 @@ color: #a6a6a6; right: 0.429rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.287rem; } @@ -1504,6 +1603,7 @@ color: #a6a6a6; right: 1.858rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1541,9 +1641,11 @@ background: #617c8a; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e7a3a3; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f4f4f4; } @@ -1556,9 +1658,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #617c8a; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1589,6 +1693,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #d66161; } + .p-selectbutton .p-button { background: #eaeaea; border: 1px solid #eaeaea; @@ -1596,7 +1701,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #666666; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1605,7 +1710,7 @@ color: #333333; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #666666; } .p-selectbutton .p-button.p-highlight { @@ -1614,7 +1719,7 @@ color: #385048; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #385048; } .p-selectbutton .p-button.p-highlight:hover { @@ -1623,12 +1728,14 @@ color: #385048; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #385048; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #e7a3a3; } + .p-slider { background: #c4c4c4; border: 0 none; @@ -1680,6 +1787,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #eaeaea; border: 1px solid #eaeaea; @@ -1687,7 +1795,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #666666; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1696,7 +1804,7 @@ color: #333333; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #666666; } .p-togglebutton.p-button.p-highlight { @@ -1705,7 +1813,7 @@ color: #385048; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #385048; } .p-togglebutton.p-button.p-highlight:hover { @@ -1714,12 +1822,14 @@ color: #385048; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #385048; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #e7a3a3; } + .p-treeselect { background: #ffffff; border: 1px solid #dadada; @@ -1756,12 +1866,15 @@ border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e7a3a3; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.2145rem 0.429rem; } + .p-treeselect-panel { background: #ffffff; color: #666666; @@ -1821,6 +1934,7 @@ color: #666666; background: transparent; } + .p-input-filled .p-treeselect { background: #f4f4f4; } @@ -1830,6 +1944,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f4f4f4; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.429rem; } @@ -1837,6 +1952,7 @@ color: #a6a6a6; right: 2.357rem; } + .p-button { color: #ffffff; background: #7b95a3; @@ -1948,7 +2064,7 @@ padding: 0.429rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1975,426 +2091,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #a3897b; border: 1px solid #8e6f5f; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #8e6f5f; color: #ffffff; border-color: #7a5743; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bfaaa0; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #7a5743; color: #ffffff; border-color: #6e4e3c; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #a3897b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(163, 137, 123, 0.04); color: #a3897b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(163, 137, 123, 0.16); color: #a3897b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #a3897b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(163, 137, 123, 0.04); border-color: transparent; color: #a3897b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(163, 137, 123, 0.16); border-color: transparent; color: #a3897b; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #3d4447; background: #a3def8; border: 1px solid #79c8eb; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #81cbec; color: #3d4447; border-color: #60b7de; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #d2effc; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #3ea9db; color: #3d4447; border-color: #2987b1; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #a3def8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(163, 222, 248, 0.04); color: #a3def8; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(163, 222, 248, 0.16); color: #a3def8; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #a3def8; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(163, 222, 248, 0.04); border-color: transparent; color: #a3def8; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(163, 222, 248, 0.16); border-color: transparent; color: #a3def8; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #323e39; background: #a3e2c6; border: 1px solid #80caaa; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #80caaa; color: #323e39; border-color: #5ea285; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #caeede; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #31b57c; color: #323e39; border-color: #5ea285; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #a3e2c6; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(163, 226, 198, 0.04); color: #a3e2c6; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(163, 226, 198, 0.16); color: #a3e2c6; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #a3e2c6; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(163, 226, 198, 0.04); border-color: transparent; color: #a3e2c6; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(163, 226, 198, 0.16); border-color: transparent; color: #a3e2c6; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #333333; background: #ffe38e; border: 1px solid #ffd95e; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd95e; color: #333333; border-color: #ffce3c; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ffe9a8; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffce3c; color: #333333; border-color: #ffc62a; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe38e; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 227, 142, 0.04); color: #ffe38e; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 227, 142, 0.16); color: #ffe38e; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe38e; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 227, 142, 0.04); border-color: transparent; color: #ffe38e; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 227, 142, 0.16); border-color: transparent; color: #ffe38e; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #333333; background: #e9bef1; border: 1px solid #de9eea; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #de9eea; color: #333333; border-color: #d37de3; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #f0d3f6; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #d37de3; color: #333333; border-color: #c85ddc; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #e9bef1; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(233, 190, 241, 0.04); color: #e9bef1; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(233, 190, 241, 0.16); color: #e9bef1; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #e9bef1; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(233, 190, 241, 0.04); border-color: transparent; color: #e9bef1; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(233, 190, 241, 0.16); border-color: transparent; color: #e9bef1; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #262222; background: #f4b6b6; border: 1px solid #e38787; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #ef9999; color: #262222; border-color: #cb5858; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fbe2e2; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #eb5656; color: #262222; border-color: #b73737; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f4b6b6; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 182, 182, 0.04); color: #f4b6b6; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 182, 182, 0.16); color: #f4b6b6; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f4b6b6; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 182, 182, 0.04); border-color: transparent; color: #f4b6b6; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 182, 182, 0.16); border-color: transparent; color: #f4b6b6; } + .p-button.p-button-link { color: #617c8a; background: transparent; @@ -2418,6 +2542,7 @@ color: #617c8a; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2429,14 +2554,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2447,45 +2575,52 @@ background: #222c31; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 2px; } @@ -2563,6 +2698,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #a3897b; @@ -2591,6 +2727,7 @@ border-color: transparent; color: #a3897b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #a3def8; @@ -2619,6 +2756,7 @@ border-color: transparent; color: #a3def8; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #a3e2c6; @@ -2647,6 +2785,7 @@ border-color: transparent; color: #a3e2c6; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe38e; @@ -2675,6 +2814,7 @@ border-color: transparent; color: #ffe38e; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #e9bef1; @@ -2703,6 +2843,7 @@ border-color: transparent; color: #e9bef1; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f4b6b6; @@ -2731,8 +2872,9 @@ border-color: transparent; color: #f4b6b6; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #a6a6a6; @@ -2743,13 +2885,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #666666; border-color: transparent; background: transparent; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; @@ -2775,6 +2917,7 @@ background: #afd3c8; color: #385048; } + .p-datatable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -2868,9 +3011,9 @@ padding: 0.571rem 0.857rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #a6a6a6; @@ -2880,17 +3023,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #666666; border-color: transparent; background: transparent; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; @@ -2920,12 +3063,12 @@ background: #7b95a3; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #7b95a3; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #ffffff; } .p-datatable .p-datatable-loading-icon { @@ -3028,6 +3171,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.71375rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3066,10 +3210,12 @@ .p-dataview .p-dataview-emptymessage { padding: 0.571rem 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3097,6 +3243,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3116,6 +3263,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-column-filter-overlay { background: #ffffff; color: #666666; @@ -3153,6 +3301,7 @@ border-top: 1px solid #dadada; margin: 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.429rem 0.857rem; border-bottom: 1px solid #dadada; @@ -3181,6 +3330,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 0.571rem 1rem; } + .p-orderlist .p-orderlist-controls { padding: 0.571rem 1rem; } @@ -3266,6 +3416,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #f4f4f4; } + .p-orderlist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3274,6 +3425,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f4f4f4; color: #666666; @@ -3312,6 +3464,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-paginator { background: #ffffff; color: #666666; @@ -3321,9 +3474,9 @@ border-radius: 2px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #666666; @@ -3334,9 +3487,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #f4f4f4; border-color: transparent; color: #666666; @@ -3393,6 +3546,7 @@ border-color: transparent; color: #666666; } + .p-picklist .p-picklist-buttons { padding: 0.571rem 1rem; } @@ -3478,6 +3632,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #f4f4f4; } + .p-picklist-item.cdk-drag-preview { padding: 0.429rem 0.857rem; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -3486,6 +3641,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 0 none; border-radius: 50%; @@ -3497,19 +3653,20 @@ background-color: #c8c8c8; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #dadada; background: #ffffff; @@ -3566,11 +3723,11 @@ color: #385048; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #385048; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #385048; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3643,6 +3800,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-treetable .p-paginator-top { border-width: 1px 1px 0 1px; border-radius: 0; @@ -3782,7 +3940,7 @@ background: #7b95a3; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #7b95a3; } .p-treetable .p-treetable-loading-icon { @@ -3843,6 +4001,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.71375rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #7b95a3; color: #ffffff; @@ -3867,6 +4026,7 @@ border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 0.857rem 1rem; border: 1px solid #7b95a3; @@ -3915,6 +4075,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 2px; } + .p-card { background: #ffffff; color: #666666; @@ -3940,6 +4101,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3963,6 +4125,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #dadada; background: #ffffff; @@ -4003,6 +4166,7 @@ .p-fieldset .p-fieldset-content { padding: 0.571rem 1rem; } + .p-panel .p-panel-header { border: 1px solid #7b95a3; padding: 0.857rem 1rem; @@ -4069,6 +4233,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; @@ -4079,6 +4244,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-splitter { border: 1px solid #dadada; background: #ffffff; @@ -4100,6 +4266,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #dadada; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4168,6 +4335,7 @@ border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; } + .p-toolbar { background: #7b95a3; border: 1px solid #7b95a3; @@ -4178,6 +4346,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #666666; @@ -4225,6 +4394,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 2px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); @@ -4297,6 +4467,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #666666; @@ -4338,6 +4509,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #f1f1f1; } + .p-sidebar { background: #ffffff; color: #666666; @@ -4348,7 +4520,7 @@ padding: 0.857rem 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #a6a6a6; @@ -4358,13 +4530,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #666666; border-color: transparent; background: transparent; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; @@ -4378,6 +4550,7 @@ .p-sidebar .p-sidebar-footer { padding: 0.857rem 1rem; } + .p-tooltip .p-tooltip-text { background: #afd3c8; color: #385048; @@ -4397,6 +4570,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #afd3c8; } + .p-fileupload .p-fileupload-buttonbar { background: #7b95a3; padding: 0.857rem 1rem; @@ -4436,6 +4610,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #6c8999; color: #ffffff; @@ -4446,6 +4621,7 @@ color: #ffffff; border-color: #617c8a; } + .p-breadcrumb { background: #ffffff; border: 1px solid #c8c8c8; @@ -4477,6 +4653,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #666666; } + .p-contextmenu { padding: 0; background: #ffffff; @@ -4524,7 +4701,7 @@ color: #666666; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4538,7 +4715,7 @@ color: #666666; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4549,7 +4726,7 @@ color: #666666; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #666666; } .p-contextmenu .p-menuitem-separator { @@ -4563,6 +4740,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4586,31 +4764,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4669,7 +4848,7 @@ color: #666666; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4683,7 +4862,7 @@ color: #666666; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4694,7 +4873,7 @@ color: #666666; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #666666; } .p-megamenu .p-megamenu-panel { @@ -4752,9 +4931,10 @@ color: #666666; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #666666; } + .p-menu { padding: 0; background: #ffffff; @@ -4791,7 +4971,7 @@ color: #666666; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4805,7 +4985,7 @@ color: #666666; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4816,7 +4996,7 @@ color: #666666; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #666666; } .p-menu.p-menu-overlay { @@ -4850,6 +5030,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #ffffff; @@ -4888,7 +5069,7 @@ color: #666666; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #666666; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4919,7 +5100,7 @@ color: #666666; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4933,7 +5114,7 @@ color: #666666; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4944,7 +5125,7 @@ color: #666666; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #666666; } .p-menubar .p-submenu-list { @@ -4961,6 +5142,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5135,7 +5317,7 @@ color: #666666; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5149,7 +5331,7 @@ color: #666666; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5160,7 +5342,7 @@ color: #666666; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #666666; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5176,6 +5358,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 2px; } + .p-slidemenu { padding: 0; background: #ffffff; @@ -5218,7 +5401,7 @@ color: #666666; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5232,7 +5415,7 @@ color: #666666; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5243,7 +5426,7 @@ color: #666666; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #666666; } .p-slidemenu.p-slidemenu-overlay { @@ -5290,6 +5473,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -5334,6 +5518,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 0 none; @@ -5404,6 +5589,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #e4e9ec; } + .p-tieredmenu { padding: 0; background: #ffffff; @@ -5454,7 +5640,7 @@ color: #666666; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5468,7 +5654,7 @@ color: #666666; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #666666; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5479,7 +5665,7 @@ color: #666666; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #666666; } .p-tieredmenu .p-menuitem-separator { @@ -5493,6 +5679,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem; margin: 0; @@ -5548,6 +5735,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 2px; @@ -5636,6 +5824,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5686,7 +5875,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-success { @@ -5696,7 +5885,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5706,7 +5895,7 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #212121; } .p-toast .p-toast-message.p-toast-message-error { @@ -5716,9 +5905,10 @@ color: #212121; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #212121; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5749,7 +5939,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5806,7 +5996,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #aeb6bf; @@ -5816,7 +6006,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #aeb6bf; } @@ -5825,23 +6015,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5865,6 +6061,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #dadada; border-radius: 2px; @@ -5885,9 +6082,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #7b95a3; color: #ffffff; @@ -5929,6 +6128,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #dadada; color: #666666; @@ -5964,6 +6164,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.429rem 0.429rem; border-radius: 2px; @@ -5978,6 +6179,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-progressbar { border: 0 none; height: 24px; @@ -5993,6 +6195,7 @@ color: #ffffff; line-height: 24px; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6014,6 +6217,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #dadada; border-radius: 2px; @@ -6021,6 +6225,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #7b95a3; color: #ffffff; @@ -6053,6 +6258,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #666666; @@ -6072,6 +6278,7 @@ .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { color: #ffffff; } + .p-dialog .p-dialog-header .p-dialog-header-icon { color: #ffffff; } diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css index 89d1ad5b798..3f688430269 100644 --- a/src/assets/components/themes/saga-blue/theme.css +++ b/src/assets/components/themes/saga-blue/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #f44336; } + .p-text-secondary { color: #6c757d; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-autocomplete-panel { background: #ffffff; color: #495057; @@ -427,9 +440,11 @@ color: #495057; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f44336; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -437,19 +452,23 @@ color: #6c757d; right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #6c757d; right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; border-color: #2196F3; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -476,7 +495,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6c757d; @@ -486,13 +505,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #495057; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #2196F3; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -664,10 +684,12 @@ color: #6c757d; right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #6c757d; right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44336; } + .p-cascadeselect-panel { background: #ffffff; color: #495057; @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f8f9fa; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44336; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -768,6 +794,7 @@ color: #6c757d; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #0b7ad1; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } @@ -831,12 +861,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #0b7ad1; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #2196F3; } @@ -875,9 +908,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f44336; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -885,22 +920,26 @@ color: #6c757d; right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid #ced4da; @@ -944,6 +983,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f44336; } + .p-dropdown-panel { background: #ffffff; color: #495057; @@ -1007,6 +1047,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-dropdown { background: #f8f9fa; } @@ -1019,9 +1060,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f44336; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1034,60 +1083,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #ced4da; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: #6c757d; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: #6c757d; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1095,9 +1162,11 @@ color: #6c757d; right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44336; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1105,12 +1174,14 @@ color: #6c757d; right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1149,9 +1220,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #0d89ec; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44336; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1184,45 +1257,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: #6c757d; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f44336; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: #6c757d; } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: #6c757d; } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: #6c757d; } + :-moz-placeholder { color: #6c757d; } + ::-moz-placeholder { color: #6c757d; } + :-ms-input-placeholder { color: #6c757d; } + .p-input-filled .p-inputtext { background-color: #f8f9fa; } @@ -1232,14 +1317,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #ffffff; color: #495057; @@ -1314,9 +1402,11 @@ box-shadow: 0 0 0 0.2rem #a6d5fa; border-color: #2196F3; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f44336; } + .p-multiselect { background: #ffffff; border: 1px solid #ced4da; @@ -1356,9 +1446,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1366,6 +1458,7 @@ color: #6c757d; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #495057; @@ -1454,6 +1547,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-multiselect { background: #f8f9fa; } @@ -1463,12 +1557,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f44336; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f44336; } + .p-password-panel { padding: 1rem; background: #ffffff; @@ -1490,6 +1587,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1497,6 +1595,7 @@ color: #6c757d; right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1504,6 +1603,7 @@ color: #6c757d; right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1541,9 +1641,11 @@ background: #0b7ad1; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44336; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f8f9fa; } @@ -1556,9 +1658,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #0b7ad1; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1589,6 +1693,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #c0392b; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #ced4da; @@ -1596,7 +1701,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #6c757d; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1605,7 +1710,7 @@ color: #495057; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #6c757d; } .p-selectbutton .p-button.p-highlight { @@ -1614,7 +1719,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1623,12 +1728,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f44336; } + .p-slider { background: #dee2e6; border: 0 none; @@ -1680,6 +1787,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #ced4da; @@ -1687,7 +1795,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #6c757d; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1696,7 +1804,7 @@ color: #495057; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #6c757d; } .p-togglebutton.p-button.p-highlight { @@ -1705,7 +1813,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1714,12 +1822,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f44336; } + .p-treeselect { background: #ffffff; border: 1px solid #ced4da; @@ -1756,12 +1866,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44336; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #ffffff; color: #495057; @@ -1821,6 +1934,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-treeselect { background: #f8f9fa; } @@ -1830,6 +1944,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1837,6 +1952,7 @@ color: #6c757d; right: 2.357rem; } + .p-button { color: #ffffff; background: #2196F3; @@ -1948,7 +2064,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1975,426 +2091,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607d8b; border: 1px solid #607d8b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #56717d; color: #ffffff; border-color: #56717d; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #beccd2; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #4d646f; color: #ffffff; border-color: #4d646f; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(96, 125, 139, 0.16); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #607d8b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607d8b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607d8b; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0288d1; border: 1px solid #0288d1; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #027abc; color: #ffffff; border-color: #027abc; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #89d4fe; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #026da7; color: #ffffff; border-color: #026da7; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(2, 136, 209, 0.16); color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0288d1; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); border-color: transparent; color: #0288d1; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(2, 136, 209, 0.16); border-color: transparent; color: #0288d1; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689f38; border: 1px solid #689f38; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #5e8f32; color: #ffffff; border-color: #5e8f32; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #c2e0a8; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #537f2d; color: #ffffff; border-color: #537f2d; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(104, 159, 56, 0.16); color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #689f38; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689f38; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689f38; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #fbc02d; border: 1px solid #fbc02d; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fab710; color: #212529; border-color: #fab710; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde6ab; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #e8a704; color: #212529; border-color: #e8a704; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 192, 45, 0.16); color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fbc02d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #fbc02d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #fbc02d; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 1px solid #9c27b0; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #8c239e; color: #ffffff; border-color: #8c239e; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #df9eea; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7d1f8d; color: #ffffff; border-color: #7d1f8d; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d32f2f; border: 1px solid #d32f2f; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c02929; color: #ffffff; border-color: #c02929; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #edacac; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #aa2424; color: #ffffff; border-color: #aa2424; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(211, 47, 47, 0.16); color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d32f2f; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #d32f2f; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #d32f2f; } + .p-button.p-button-link { color: #0b7ad1; background: transparent; @@ -2418,6 +2542,7 @@ color: #0b7ad1; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2429,14 +2554,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2447,45 +2575,52 @@ background: #343a40; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2563,6 +2698,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #607d8b; @@ -2591,6 +2727,7 @@ border-color: transparent; color: #607d8b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #0288d1; @@ -2619,6 +2756,7 @@ border-color: transparent; color: #0288d1; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #689f38; @@ -2647,6 +2785,7 @@ border-color: transparent; color: #689f38; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fbc02d; @@ -2675,6 +2814,7 @@ border-color: transparent; color: #fbc02d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2703,6 +2843,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d32f2f; @@ -2731,8 +2872,9 @@ border-color: transparent; color: #d32f2f; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6c757d; @@ -2743,13 +2885,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; @@ -2775,6 +2917,7 @@ background: #E3F2FD; color: #495057; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2868,9 +3011,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6c757d; @@ -2880,17 +3023,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; @@ -2920,12 +3063,12 @@ background: #2196F3; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f8f9fa; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f8f9fa; } .p-datatable .p-datatable-loading-icon { @@ -3028,6 +3171,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3066,10 +3210,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3097,6 +3243,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3116,6 +3263,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-column-filter-overlay { background: #ffffff; color: #495057; @@ -3153,6 +3301,7 @@ border-top: 1px solid #dee2e6; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3181,6 +3330,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3266,6 +3416,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #e9ecef; } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3274,6 +3425,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #495057; @@ -3312,6 +3464,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-paginator { background: #ffffff; color: #6c757d; @@ -3321,9 +3474,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #6c757d; @@ -3334,9 +3487,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; border-color: transparent; color: #495057; @@ -3393,6 +3546,7 @@ border-color: transparent; color: #495057; } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3478,6 +3632,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #e9ecef; } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3486,6 +3641,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #2196F3; border-radius: 50%; @@ -3497,19 +3653,20 @@ background-color: #dee2e6; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3566,11 +3723,11 @@ color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3643,6 +3800,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3782,7 +3940,7 @@ background: #2196F3; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f8f9fa; } .p-treetable .p-treetable-loading-icon { @@ -3843,6 +4001,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f8f9fa; color: #495057; @@ -3867,6 +4026,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #dee2e6; @@ -3939,6 +4099,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #ffffff; color: #495057; @@ -3964,6 +4125,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3987,6 +4149,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -4027,6 +4190,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem; @@ -4093,6 +4257,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; @@ -4103,6 +4268,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -4124,6 +4290,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4192,6 +4359,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #f8f9fa; border: 1px solid #dee2e6; @@ -4202,6 +4370,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #495057; @@ -4249,6 +4418,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4321,6 +4491,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #495057; @@ -4362,6 +4533,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #495057; @@ -4372,7 +4544,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6c757d; @@ -4382,13 +4554,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; @@ -4402,6 +4574,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #495057; color: #ffffff; @@ -4421,6 +4594,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #495057; } + .p-fileupload .p-fileupload-buttonbar { background: #f8f9fa; padding: 1rem; @@ -4460,6 +4634,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #0d89ec; color: #ffffff; @@ -4470,6 +4645,7 @@ color: #ffffff; border-color: #0b7ad1; } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4501,6 +4677,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6c757d; } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4548,7 +4725,7 @@ color: #495057; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4739,7 @@ color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4573,7 +4750,7 @@ color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-contextmenu .p-menuitem-separator { @@ -4587,6 +4764,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4610,31 +4788,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4693,7 +4872,7 @@ color: #495057; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4707,7 +4886,7 @@ color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4718,7 +4897,7 @@ color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-megamenu .p-megamenu-panel { @@ -4776,9 +4955,10 @@ color: #495057; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4815,7 +4995,7 @@ color: #495057; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4829,7 +5009,7 @@ color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4840,7 +5020,7 @@ color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menu.p-menu-overlay { @@ -4874,6 +5054,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f8f9fa; @@ -4912,7 +5093,7 @@ color: #495057; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4943,7 +5124,7 @@ color: #495057; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4957,7 +5138,7 @@ color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4968,7 +5149,7 @@ color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-submenu-list { @@ -4985,6 +5166,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5159,7 +5341,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5173,7 +5355,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5184,7 +5366,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5224,6 +5406,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #ffffff; @@ -5266,7 +5449,7 @@ color: #495057; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5280,7 +5463,7 @@ color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5291,7 +5474,7 @@ color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-slidemenu.p-slidemenu-overlay { @@ -5338,6 +5521,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5382,6 +5566,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -5452,6 +5637,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #a6d5fa; } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5502,7 +5688,7 @@ color: #495057; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5516,7 +5702,7 @@ color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5527,7 +5713,7 @@ color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-tieredmenu .p-menuitem-separator { @@ -5541,6 +5727,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5596,6 +5783,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5684,6 +5872,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5734,7 +5923,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5744,7 +5933,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5754,7 +5943,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5764,9 +5953,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5797,7 +5987,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5854,7 +6044,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5864,7 +6054,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5873,23 +6063,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5913,6 +6109,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #dee2e6; border-radius: 3px; @@ -5933,9 +6130,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #2196F3; color: #ffffff; @@ -5977,6 +6176,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #dee2e6; color: #495057; @@ -6012,6 +6212,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6026,6 +6227,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6041,6 +6243,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6062,6 +6265,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e9ecef; border-radius: 3px; @@ -6069,6 +6273,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #2196F3; color: #ffffff; @@ -6101,6 +6306,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #495057; @@ -6118,9 +6324,11 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #2196F3; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #2196F3; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #2196F3; } diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css index 8251e322888..8ac1594cde8 100644 --- a/src/assets/components/themes/saga-green/theme.css +++ b/src/assets/components/themes/saga-green/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #f44336; } + .p-text-secondary { color: #6c757d; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-autocomplete-panel { background: #ffffff; color: #495057; @@ -427,9 +440,11 @@ color: #495057; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f44336; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -437,19 +452,23 @@ color: #6c757d; right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #6c757d; right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; border-color: #4CAF50; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -476,7 +495,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6c757d; @@ -486,13 +505,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #495057; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #4CAF50; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -664,10 +684,12 @@ color: #6c757d; right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #6c757d; right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44336; } + .p-cascadeselect-panel { background: #ffffff; color: #495057; @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f8f9fa; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44336; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -768,6 +794,7 @@ color: #6c757d; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #3d8c40; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } @@ -831,12 +861,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #3d8c40; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #4CAF50; } @@ -875,9 +908,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f44336; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -885,22 +920,26 @@ color: #6c757d; right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid #ced4da; @@ -944,6 +983,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f44336; } + .p-dropdown-panel { background: #ffffff; color: #495057; @@ -1007,6 +1047,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-dropdown { background: #f8f9fa; } @@ -1019,9 +1060,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f44336; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1034,60 +1083,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #ced4da; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: #6c757d; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: #6c757d; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1095,9 +1162,11 @@ color: #6c757d; right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44336; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1105,12 +1174,14 @@ color: #6c757d; right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1149,9 +1220,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #449e48; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44336; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1184,45 +1257,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: #6c757d; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f44336; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: #6c757d; } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: #6c757d; } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: #6c757d; } + :-moz-placeholder { color: #6c757d; } + ::-moz-placeholder { color: #6c757d; } + :-ms-input-placeholder { color: #6c757d; } + .p-input-filled .p-inputtext { background-color: #f8f9fa; } @@ -1232,14 +1317,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #ffffff; color: #495057; @@ -1314,9 +1402,11 @@ box-shadow: 0 0 0 0.2rem #b7e0b8; border-color: #4CAF50; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f44336; } + .p-multiselect { background: #ffffff; border: 1px solid #ced4da; @@ -1356,9 +1446,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1366,6 +1458,7 @@ color: #6c757d; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #495057; @@ -1454,6 +1547,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-multiselect { background: #f8f9fa; } @@ -1463,12 +1557,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f44336; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f44336; } + .p-password-panel { padding: 1rem; background: #ffffff; @@ -1490,6 +1587,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1497,6 +1595,7 @@ color: #6c757d; right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1504,6 +1603,7 @@ color: #6c757d; right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1541,9 +1641,11 @@ background: #3d8c40; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44336; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f8f9fa; } @@ -1556,9 +1658,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #3d8c40; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1589,6 +1693,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #c0392b; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #ced4da; @@ -1596,7 +1701,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #6c757d; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1605,7 +1710,7 @@ color: #495057; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #6c757d; } .p-selectbutton .p-button.p-highlight { @@ -1614,7 +1719,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1623,12 +1728,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f44336; } + .p-slider { background: #dee2e6; border: 0 none; @@ -1680,6 +1787,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #ced4da; @@ -1687,7 +1795,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #6c757d; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1696,7 +1804,7 @@ color: #495057; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #6c757d; } .p-togglebutton.p-button.p-highlight { @@ -1705,7 +1813,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1714,12 +1822,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f44336; } + .p-treeselect { background: #ffffff; border: 1px solid #ced4da; @@ -1756,12 +1866,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44336; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #ffffff; color: #495057; @@ -1821,6 +1934,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-treeselect { background: #f8f9fa; } @@ -1830,6 +1944,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1837,6 +1952,7 @@ color: #6c757d; right: 2.357rem; } + .p-button { color: #ffffff; background: #4CAF50; @@ -1948,7 +2064,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1975,426 +2091,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607d8b; border: 1px solid #607d8b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #56717d; color: #ffffff; border-color: #56717d; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #beccd2; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #4d646f; color: #ffffff; border-color: #4d646f; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(96, 125, 139, 0.16); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #607d8b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607d8b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607d8b; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0288d1; border: 1px solid #0288d1; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #027abc; color: #ffffff; border-color: #027abc; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #89d4fe; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #026da7; color: #ffffff; border-color: #026da7; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(2, 136, 209, 0.16); color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0288d1; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); border-color: transparent; color: #0288d1; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(2, 136, 209, 0.16); border-color: transparent; color: #0288d1; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689f38; border: 1px solid #689f38; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #5e8f32; color: #ffffff; border-color: #5e8f32; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #c2e0a8; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #537f2d; color: #ffffff; border-color: #537f2d; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(104, 159, 56, 0.16); color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #689f38; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689f38; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689f38; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #fbc02d; border: 1px solid #fbc02d; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fab710; color: #212529; border-color: #fab710; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde6ab; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #e8a704; color: #212529; border-color: #e8a704; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 192, 45, 0.16); color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fbc02d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #fbc02d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #fbc02d; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 1px solid #9c27b0; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #8c239e; color: #ffffff; border-color: #8c239e; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #df9eea; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7d1f8d; color: #ffffff; border-color: #7d1f8d; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d32f2f; border: 1px solid #d32f2f; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c02929; color: #ffffff; border-color: #c02929; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #edacac; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #aa2424; color: #ffffff; border-color: #aa2424; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(211, 47, 47, 0.16); color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d32f2f; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #d32f2f; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #d32f2f; } + .p-button.p-button-link { color: #3d8c40; background: transparent; @@ -2418,6 +2542,7 @@ color: #3d8c40; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2429,14 +2554,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2447,45 +2575,52 @@ background: #343a40; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2563,6 +2698,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #607d8b; @@ -2591,6 +2727,7 @@ border-color: transparent; color: #607d8b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #0288d1; @@ -2619,6 +2756,7 @@ border-color: transparent; color: #0288d1; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #689f38; @@ -2647,6 +2785,7 @@ border-color: transparent; color: #689f38; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fbc02d; @@ -2675,6 +2814,7 @@ border-color: transparent; color: #fbc02d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2703,6 +2843,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d32f2f; @@ -2731,8 +2872,9 @@ border-color: transparent; color: #d32f2f; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6c757d; @@ -2743,13 +2885,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; @@ -2775,6 +2917,7 @@ background: #E8F5E9; color: #495057; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2868,9 +3011,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6c757d; @@ -2880,17 +3023,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; @@ -2920,12 +3063,12 @@ background: #4CAF50; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f8f9fa; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f8f9fa; } .p-datatable .p-datatable-loading-icon { @@ -3028,6 +3171,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3066,10 +3210,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3097,6 +3243,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3116,6 +3263,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-column-filter-overlay { background: #ffffff; color: #495057; @@ -3153,6 +3301,7 @@ border-top: 1px solid #dee2e6; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3181,6 +3330,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3266,6 +3416,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #e9ecef; } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3274,6 +3425,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #495057; @@ -3312,6 +3464,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-paginator { background: #ffffff; color: #6c757d; @@ -3321,9 +3474,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #6c757d; @@ -3334,9 +3487,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; border-color: transparent; color: #495057; @@ -3393,6 +3546,7 @@ border-color: transparent; color: #495057; } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3478,6 +3632,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #e9ecef; } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3486,6 +3641,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #4CAF50; border-radius: 50%; @@ -3497,19 +3653,20 @@ background-color: #dee2e6; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3566,11 +3723,11 @@ color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3643,6 +3800,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3782,7 +3940,7 @@ background: #4CAF50; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f8f9fa; } .p-treetable .p-treetable-loading-icon { @@ -3843,6 +4001,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f8f9fa; color: #495057; @@ -3867,6 +4026,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #dee2e6; @@ -3939,6 +4099,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #ffffff; color: #495057; @@ -3964,6 +4125,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3987,6 +4149,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -4027,6 +4190,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem; @@ -4093,6 +4257,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; @@ -4103,6 +4268,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -4124,6 +4290,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4192,6 +4359,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #f8f9fa; border: 1px solid #dee2e6; @@ -4202,6 +4370,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #495057; @@ -4249,6 +4418,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4321,6 +4491,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #495057; @@ -4362,6 +4533,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #495057; @@ -4372,7 +4544,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6c757d; @@ -4382,13 +4554,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; @@ -4402,6 +4574,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #495057; color: #ffffff; @@ -4421,6 +4594,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #495057; } + .p-fileupload .p-fileupload-buttonbar { background: #f8f9fa; padding: 1rem; @@ -4460,6 +4634,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #449e48; color: #ffffff; @@ -4470,6 +4645,7 @@ color: #ffffff; border-color: #3d8c40; } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4501,6 +4677,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6c757d; } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4548,7 +4725,7 @@ color: #495057; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4739,7 @@ color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4573,7 +4750,7 @@ color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-contextmenu .p-menuitem-separator { @@ -4587,6 +4764,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4610,31 +4788,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4693,7 +4872,7 @@ color: #495057; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4707,7 +4886,7 @@ color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4718,7 +4897,7 @@ color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-megamenu .p-megamenu-panel { @@ -4776,9 +4955,10 @@ color: #495057; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4815,7 +4995,7 @@ color: #495057; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4829,7 +5009,7 @@ color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4840,7 +5020,7 @@ color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menu.p-menu-overlay { @@ -4874,6 +5054,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f8f9fa; @@ -4912,7 +5093,7 @@ color: #495057; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4943,7 +5124,7 @@ color: #495057; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4957,7 +5138,7 @@ color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4968,7 +5149,7 @@ color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-submenu-list { @@ -4985,6 +5166,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5159,7 +5341,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5173,7 +5355,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5184,7 +5366,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5224,6 +5406,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #ffffff; @@ -5266,7 +5449,7 @@ color: #495057; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5280,7 +5463,7 @@ color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5291,7 +5474,7 @@ color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-slidemenu.p-slidemenu-overlay { @@ -5338,6 +5521,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5382,6 +5566,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -5452,6 +5637,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #b7e0b8; } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5502,7 +5688,7 @@ color: #495057; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5516,7 +5702,7 @@ color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5527,7 +5713,7 @@ color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-tieredmenu .p-menuitem-separator { @@ -5541,6 +5727,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5596,6 +5783,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5684,6 +5872,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5734,7 +5923,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5744,7 +5933,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5754,7 +5943,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5764,9 +5953,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5797,7 +5987,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5854,7 +6044,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5864,7 +6054,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5873,23 +6063,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5913,6 +6109,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #dee2e6; border-radius: 3px; @@ -5933,9 +6130,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #4CAF50; color: #ffffff; @@ -5977,6 +6176,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #dee2e6; color: #495057; @@ -6012,6 +6212,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6026,6 +6227,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6041,6 +6243,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6062,6 +6265,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e9ecef; border-radius: 3px; @@ -6069,6 +6273,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #4CAF50; color: #ffffff; @@ -6101,6 +6306,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #495057; @@ -6118,9 +6324,11 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #4CAF50; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #4CAF50; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #4CAF50; } diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css index 3a6054753bd..9302ff6c9ed 100644 --- a/src/assets/components/themes/saga-orange/theme.css +++ b/src/assets/components/themes/saga-orange/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #f44336; } + .p-text-secondary { color: #6c757d; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-autocomplete-panel { background: #ffffff; color: #495057; @@ -427,9 +440,11 @@ color: #495057; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f44336; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -437,19 +452,23 @@ color: #6c757d; right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #6c757d; right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; border-color: #FFC107; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -476,7 +495,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6c757d; @@ -486,13 +505,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #495057; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #FFC107; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -664,10 +684,12 @@ color: #6c757d; right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #6c757d; right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44336; } + .p-cascadeselect-panel { background: #ffffff; color: #495057; @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f8f9fa; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44336; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -768,6 +794,7 @@ color: #6c757d; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #d29d00; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } @@ -831,12 +861,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #d29d00; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #FFC107; } @@ -875,9 +908,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f44336; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -885,22 +920,26 @@ color: #6c757d; right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid #ced4da; @@ -944,6 +983,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f44336; } + .p-dropdown-panel { background: #ffffff; color: #495057; @@ -1007,6 +1047,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-dropdown { background: #f8f9fa; } @@ -1019,9 +1060,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f44336; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1034,60 +1083,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #ced4da; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: #6c757d; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: #6c757d; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1095,9 +1162,11 @@ color: #6c757d; right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44336; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1105,12 +1174,14 @@ color: #6c757d; right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1149,9 +1220,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #ecb100; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44336; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1184,45 +1257,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: #6c757d; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f44336; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: #6c757d; } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: #6c757d; } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: #6c757d; } + :-moz-placeholder { color: #6c757d; } + ::-moz-placeholder { color: #6c757d; } + :-ms-input-placeholder { color: #6c757d; } + .p-input-filled .p-inputtext { background-color: #f8f9fa; } @@ -1232,14 +1317,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #ffffff; color: #495057; @@ -1314,9 +1402,11 @@ box-shadow: 0 0 0 0.2rem #ffe69c; border-color: #FFC107; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f44336; } + .p-multiselect { background: #ffffff; border: 1px solid #ced4da; @@ -1356,9 +1446,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1366,6 +1458,7 @@ color: #6c757d; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #495057; @@ -1454,6 +1547,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-multiselect { background: #f8f9fa; } @@ -1463,12 +1557,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f44336; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f44336; } + .p-password-panel { padding: 1rem; background: #ffffff; @@ -1490,6 +1587,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1497,6 +1595,7 @@ color: #6c757d; right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1504,6 +1603,7 @@ color: #6c757d; right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1541,9 +1641,11 @@ background: #d29d00; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44336; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f8f9fa; } @@ -1556,9 +1658,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #d29d00; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1589,6 +1693,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #c0392b; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #ced4da; @@ -1596,7 +1701,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #6c757d; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1605,7 +1710,7 @@ color: #495057; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #6c757d; } .p-selectbutton .p-button.p-highlight { @@ -1614,7 +1719,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1623,12 +1728,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f44336; } + .p-slider { background: #dee2e6; border: 0 none; @@ -1680,6 +1787,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #ced4da; @@ -1687,7 +1795,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #6c757d; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1696,7 +1804,7 @@ color: #495057; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #6c757d; } .p-togglebutton.p-button.p-highlight { @@ -1705,7 +1813,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1714,12 +1822,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f44336; } + .p-treeselect { background: #ffffff; border: 1px solid #ced4da; @@ -1756,12 +1866,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44336; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #ffffff; color: #495057; @@ -1821,6 +1934,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-treeselect { background: #f8f9fa; } @@ -1830,6 +1944,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1837,6 +1952,7 @@ color: #6c757d; right: 2.357rem; } + .p-button { color: #212529; background: #FFC107; @@ -1948,7 +2064,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1975,426 +2091,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607d8b; border: 1px solid #607d8b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #56717d; color: #ffffff; border-color: #56717d; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #beccd2; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #4d646f; color: #ffffff; border-color: #4d646f; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(96, 125, 139, 0.16); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #607d8b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607d8b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607d8b; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0288d1; border: 1px solid #0288d1; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #027abc; color: #ffffff; border-color: #027abc; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #89d4fe; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #026da7; color: #ffffff; border-color: #026da7; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(2, 136, 209, 0.16); color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0288d1; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); border-color: transparent; color: #0288d1; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(2, 136, 209, 0.16); border-color: transparent; color: #0288d1; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689f38; border: 1px solid #689f38; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #5e8f32; color: #ffffff; border-color: #5e8f32; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #c2e0a8; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #537f2d; color: #ffffff; border-color: #537f2d; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(104, 159, 56, 0.16); color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #689f38; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689f38; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689f38; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #fbc02d; border: 1px solid #fbc02d; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fab710; color: #212529; border-color: #fab710; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde6ab; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #e8a704; color: #212529; border-color: #e8a704; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 192, 45, 0.16); color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fbc02d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #fbc02d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #fbc02d; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 1px solid #9c27b0; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #8c239e; color: #ffffff; border-color: #8c239e; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #df9eea; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7d1f8d; color: #ffffff; border-color: #7d1f8d; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d32f2f; border: 1px solid #d32f2f; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c02929; color: #ffffff; border-color: #c02929; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #edacac; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #aa2424; color: #ffffff; border-color: #aa2424; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(211, 47, 47, 0.16); color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d32f2f; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #d32f2f; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #d32f2f; } + .p-button.p-button-link { color: #d29d00; background: transparent; @@ -2418,6 +2542,7 @@ color: #d29d00; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2429,14 +2554,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2447,45 +2575,52 @@ background: #343a40; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2563,6 +2698,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #607d8b; @@ -2591,6 +2727,7 @@ border-color: transparent; color: #607d8b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #0288d1; @@ -2619,6 +2756,7 @@ border-color: transparent; color: #0288d1; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #689f38; @@ -2647,6 +2785,7 @@ border-color: transparent; color: #689f38; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fbc02d; @@ -2675,6 +2814,7 @@ border-color: transparent; color: #fbc02d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2703,6 +2843,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d32f2f; @@ -2731,8 +2872,9 @@ border-color: transparent; color: #d32f2f; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6c757d; @@ -2743,13 +2885,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; @@ -2775,6 +2917,7 @@ background: #FFF3E0; color: #495057; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2868,9 +3011,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6c757d; @@ -2880,17 +3023,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; @@ -2920,12 +3063,12 @@ background: #FFC107; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f8f9fa; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f8f9fa; } .p-datatable .p-datatable-loading-icon { @@ -3028,6 +3171,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3066,10 +3210,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3097,6 +3243,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3116,6 +3263,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-column-filter-overlay { background: #ffffff; color: #495057; @@ -3153,6 +3301,7 @@ border-top: 1px solid #dee2e6; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3181,6 +3330,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3266,6 +3416,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #e9ecef; } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3274,6 +3425,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #495057; @@ -3312,6 +3464,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-paginator { background: #ffffff; color: #6c757d; @@ -3321,9 +3474,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #6c757d; @@ -3334,9 +3487,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; border-color: transparent; color: #495057; @@ -3393,6 +3546,7 @@ border-color: transparent; color: #495057; } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3478,6 +3632,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #e9ecef; } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3486,6 +3641,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #FFC107; border-radius: 50%; @@ -3497,19 +3653,20 @@ background-color: #dee2e6; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3566,11 +3723,11 @@ color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3643,6 +3800,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3782,7 +3940,7 @@ background: #FFC107; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f8f9fa; } .p-treetable .p-treetable-loading-icon { @@ -3843,6 +4001,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f8f9fa; color: #495057; @@ -3867,6 +4026,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #dee2e6; @@ -3939,6 +4099,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #ffffff; color: #495057; @@ -3964,6 +4125,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3987,6 +4149,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -4027,6 +4190,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem; @@ -4093,6 +4257,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; @@ -4103,6 +4268,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -4124,6 +4290,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4192,6 +4359,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #f8f9fa; border: 1px solid #dee2e6; @@ -4202,6 +4370,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #495057; @@ -4249,6 +4418,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4321,6 +4491,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #495057; @@ -4362,6 +4533,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #495057; @@ -4372,7 +4544,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6c757d; @@ -4382,13 +4554,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; @@ -4402,6 +4574,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #495057; color: #ffffff; @@ -4421,6 +4594,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #495057; } + .p-fileupload .p-fileupload-buttonbar { background: #f8f9fa; padding: 1rem; @@ -4460,6 +4634,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #ecb100; color: #212529; @@ -4470,6 +4645,7 @@ color: #212529; border-color: #d29d00; } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4501,6 +4677,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6c757d; } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4548,7 +4725,7 @@ color: #495057; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4739,7 @@ color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4573,7 +4750,7 @@ color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-contextmenu .p-menuitem-separator { @@ -4587,6 +4764,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4610,31 +4788,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4693,7 +4872,7 @@ color: #495057; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4707,7 +4886,7 @@ color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4718,7 +4897,7 @@ color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-megamenu .p-megamenu-panel { @@ -4776,9 +4955,10 @@ color: #495057; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4815,7 +4995,7 @@ color: #495057; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4829,7 +5009,7 @@ color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4840,7 +5020,7 @@ color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menu.p-menu-overlay { @@ -4874,6 +5054,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f8f9fa; @@ -4912,7 +5093,7 @@ color: #495057; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4943,7 +5124,7 @@ color: #495057; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4957,7 +5138,7 @@ color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4968,7 +5149,7 @@ color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-submenu-list { @@ -4985,6 +5166,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5159,7 +5341,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5173,7 +5355,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5184,7 +5366,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5224,6 +5406,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #ffffff; @@ -5266,7 +5449,7 @@ color: #495057; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5280,7 +5463,7 @@ color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5291,7 +5474,7 @@ color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-slidemenu.p-slidemenu-overlay { @@ -5338,6 +5521,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5382,6 +5566,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -5452,6 +5637,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #ffe69c; } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5502,7 +5688,7 @@ color: #495057; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5516,7 +5702,7 @@ color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5527,7 +5713,7 @@ color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-tieredmenu .p-menuitem-separator { @@ -5541,6 +5727,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5596,6 +5783,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5684,6 +5872,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5734,7 +5923,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5744,7 +5933,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5754,7 +5943,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5764,9 +5953,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5797,7 +5987,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5854,7 +6044,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5864,7 +6054,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5873,23 +6063,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5913,6 +6109,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #dee2e6; border-radius: 3px; @@ -5933,9 +6130,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #FFC107; color: #212529; @@ -5977,6 +6176,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #dee2e6; color: #495057; @@ -6012,6 +6212,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6026,6 +6227,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6041,6 +6243,7 @@ color: #212529; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6062,6 +6265,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e9ecef; border-radius: 3px; @@ -6069,6 +6273,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #FFC107; color: #212529; @@ -6101,6 +6306,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #495057; @@ -6118,9 +6324,11 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #FFC107; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #FFC107; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #FFC107; } diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css index 9f1f06ebcc4..5531cc7afb7 100644 --- a/src/assets/components/themes/saga-purple/theme.css +++ b/src/assets/components/themes/saga-purple/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #f44336; } + .p-text-secondary { color: #6c757d; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-autocomplete-panel { background: #ffffff; color: #495057; @@ -427,9 +440,11 @@ color: #495057; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f44336; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -437,19 +452,23 @@ color: #6c757d; right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #6c757d; right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; border-color: #9C27B0; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -476,7 +495,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #6c757d; @@ -486,13 +505,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #495057; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #9C27B0; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -664,10 +684,12 @@ color: #6c757d; right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #6c757d; right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44336; } + .p-cascadeselect-panel { background: #ffffff; color: #495057; @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f8f9fa; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f44336; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -768,6 +794,7 @@ color: #6c757d; right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #7d1f8d; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } @@ -831,12 +861,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #7d1f8d; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #9C27B0; } @@ -875,9 +908,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f44336; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -885,22 +920,26 @@ color: #6c757d; right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 1px solid #ced4da; @@ -944,6 +983,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f44336; } + .p-dropdown-panel { background: #ffffff; color: #495057; @@ -1007,6 +1047,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-dropdown { background: #f8f9fa; } @@ -1019,9 +1060,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f44336; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1034,60 +1083,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #ced4da; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: #6c757d; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: #6c757d; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1095,9 +1162,11 @@ color: #6c757d; right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44336; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1105,12 +1174,14 @@ color: #6c757d; right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1149,9 +1220,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #8c239e; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44336; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1184,45 +1257,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: #6c757d; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f44336; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: #6c757d; } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: #6c757d; } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: #6c757d; } + :-moz-placeholder { color: #6c757d; } + ::-moz-placeholder { color: #6c757d; } + :-ms-input-placeholder { color: #6c757d; } + .p-input-filled .p-inputtext { background-color: #f8f9fa; } @@ -1232,14 +1317,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #ffffff; color: #495057; @@ -1314,9 +1402,11 @@ box-shadow: 0 0 0 0.2rem #df9eea; border-color: #9C27B0; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f44336; } + .p-multiselect { background: #ffffff; border: 1px solid #ced4da; @@ -1356,9 +1446,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1366,6 +1458,7 @@ color: #6c757d; right: 2.357rem; } + .p-multiselect-panel { background: #ffffff; color: #495057; @@ -1454,6 +1547,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-multiselect { background: #f8f9fa; } @@ -1463,12 +1557,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f44336; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f44336; } + .p-password-panel { padding: 1rem; background: #ffffff; @@ -1490,6 +1587,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1497,6 +1595,7 @@ color: #6c757d; right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1504,6 +1603,7 @@ color: #6c757d; right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1541,9 +1641,11 @@ background: #7d1f8d; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44336; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f8f9fa; } @@ -1556,9 +1658,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #7d1f8d; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1589,6 +1693,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #c0392b; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #ced4da; @@ -1596,7 +1701,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #6c757d; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1605,7 +1710,7 @@ color: #495057; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #6c757d; } .p-selectbutton .p-button.p-highlight { @@ -1614,7 +1719,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1623,12 +1728,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f44336; } + .p-slider { background: #dee2e6; border: 0 none; @@ -1680,6 +1787,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #ced4da; @@ -1687,7 +1795,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #6c757d; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1696,7 +1804,7 @@ color: #495057; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #6c757d; } .p-togglebutton.p-button.p-highlight { @@ -1705,7 +1813,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1714,12 +1822,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f44336; } + .p-treeselect { background: #ffffff; border: 1px solid #ced4da; @@ -1756,12 +1866,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44336; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #ffffff; color: #495057; @@ -1821,6 +1934,7 @@ color: #495057; background: transparent; } + .p-input-filled .p-treeselect { background: #f8f9fa; } @@ -1830,6 +1944,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1837,6 +1952,7 @@ color: #6c757d; right: 2.357rem; } + .p-button { color: #ffffff; background: #9C27B0; @@ -1948,7 +2064,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1975,426 +2091,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #607d8b; border: 1px solid #607d8b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #56717d; color: #ffffff; border-color: #56717d; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #beccd2; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #4d646f; color: #ffffff; border-color: #4d646f; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(96, 125, 139, 0.16); color: #607d8b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #607d8b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607d8b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607d8b; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #0288d1; border: 1px solid #0288d1; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #027abc; color: #ffffff; border-color: #027abc; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #89d4fe; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #026da7; color: #ffffff; border-color: #026da7; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(2, 136, 209, 0.16); color: #0288d1; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #0288d1; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); border-color: transparent; color: #0288d1; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(2, 136, 209, 0.16); border-color: transparent; color: #0288d1; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #689f38; border: 1px solid #689f38; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #5e8f32; color: #ffffff; border-color: #5e8f32; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #c2e0a8; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #537f2d; color: #ffffff; border-color: #537f2d; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(104, 159, 56, 0.16); color: #689f38; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #689f38; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689f38; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689f38; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #212529; background: #fbc02d; border: 1px solid #fbc02d; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #fab710; color: #212529; border-color: #fab710; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde6ab; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #e8a704; color: #212529; border-color: #e8a704; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(251, 192, 45, 0.16); color: #fbc02d; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #fbc02d; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #fbc02d; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #fbc02d; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #9c27b0; border: 1px solid #9c27b0; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #8c239e; color: #ffffff; border-color: #8c239e; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #df9eea; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7d1f8d; color: #ffffff; border-color: #7d1f8d; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d32f2f; border: 1px solid #d32f2f; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #c02929; color: #ffffff; border-color: #c02929; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #edacac; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #aa2424; color: #ffffff; border-color: #aa2424; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(211, 47, 47, 0.16); color: #d32f2f; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d32f2f; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #d32f2f; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #d32f2f; } + .p-button.p-button-link { color: #7d1f8d; background: transparent; @@ -2418,6 +2542,7 @@ color: #7d1f8d; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2429,14 +2554,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2447,45 +2575,52 @@ background: #343a40; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2563,6 +2698,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #607d8b; @@ -2591,6 +2727,7 @@ border-color: transparent; color: #607d8b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #0288d1; @@ -2619,6 +2756,7 @@ border-color: transparent; color: #0288d1; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #689f38; @@ -2647,6 +2785,7 @@ border-color: transparent; color: #689f38; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #fbc02d; @@ -2675,6 +2814,7 @@ border-color: transparent; color: #fbc02d; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #9c27b0; @@ -2703,6 +2843,7 @@ border-color: transparent; color: #9c27b0; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d32f2f; @@ -2731,8 +2872,9 @@ border-color: transparent; color: #d32f2f; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #6c757d; @@ -2743,13 +2885,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; @@ -2775,6 +2917,7 @@ background: #F3E5F5; color: #495057; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2868,9 +3011,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #6c757d; @@ -2880,17 +3023,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; @@ -2920,12 +3063,12 @@ background: #9C27B0; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #f8f9fa; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #f8f9fa; } .p-datatable .p-datatable-loading-icon { @@ -3028,6 +3171,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3066,10 +3210,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3097,6 +3243,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3116,6 +3263,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-column-filter-overlay { background: #ffffff; color: #495057; @@ -3153,6 +3301,7 @@ border-top: 1px solid #dee2e6; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3181,6 +3330,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3266,6 +3416,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #e9ecef; } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3274,6 +3425,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #e9ecef; color: #495057; @@ -3312,6 +3464,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-paginator { background: #ffffff; color: #6c757d; @@ -3321,9 +3474,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #6c757d; @@ -3334,9 +3487,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #e9ecef; border-color: transparent; color: #495057; @@ -3393,6 +3546,7 @@ border-color: transparent; color: #495057; } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3478,6 +3632,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #e9ecef; } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3486,6 +3641,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #9C27B0; border-radius: 50%; @@ -3497,19 +3653,20 @@ background-color: #dee2e6; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3566,11 +3723,11 @@ color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3643,6 +3800,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3782,7 +3940,7 @@ background: #9C27B0; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #f8f9fa; } .p-treetable .p-treetable-loading-icon { @@ -3843,6 +4001,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #f8f9fa; color: #495057; @@ -3867,6 +4026,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #dee2e6; @@ -3939,6 +4099,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #ffffff; color: #495057; @@ -3964,6 +4125,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3987,6 +4149,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #dee2e6; background: #ffffff; @@ -4027,6 +4190,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #dee2e6; padding: 1rem; @@ -4093,6 +4257,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; @@ -4103,6 +4268,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-splitter { border: 1px solid #dee2e6; background: #ffffff; @@ -4124,6 +4290,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4192,6 +4359,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #f8f9fa; border: 1px solid #dee2e6; @@ -4202,6 +4370,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #495057; @@ -4249,6 +4418,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4321,6 +4491,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #495057; @@ -4362,6 +4533,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #495057; @@ -4372,7 +4544,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #6c757d; @@ -4382,13 +4554,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #495057; border-color: transparent; background: #e9ecef; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; @@ -4402,6 +4574,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #495057; color: #ffffff; @@ -4421,6 +4594,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #495057; } + .p-fileupload .p-fileupload-buttonbar { background: #f8f9fa; padding: 1rem; @@ -4460,6 +4634,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #8c239e; color: #ffffff; @@ -4470,6 +4645,7 @@ color: #ffffff; border-color: #7d1f8d; } + .p-breadcrumb { background: #ffffff; border: 1px solid #dee2e6; @@ -4501,6 +4677,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #6c757d; } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; @@ -4548,7 +4725,7 @@ color: #495057; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4739,7 @@ color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4573,7 +4750,7 @@ color: #495057; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-contextmenu .p-menuitem-separator { @@ -4587,6 +4764,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4610,31 +4788,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4693,7 +4872,7 @@ color: #495057; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4707,7 +4886,7 @@ color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4718,7 +4897,7 @@ color: #495057; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-megamenu .p-megamenu-panel { @@ -4776,9 +4955,10 @@ color: #495057; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4815,7 +4995,7 @@ color: #495057; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4829,7 +5009,7 @@ color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4840,7 +5020,7 @@ color: #495057; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menu.p-menu-overlay { @@ -4874,6 +5054,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f8f9fa; @@ -4912,7 +5093,7 @@ color: #495057; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4943,7 +5124,7 @@ color: #495057; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4957,7 +5138,7 @@ color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4968,7 +5149,7 @@ color: #495057; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-menubar .p-submenu-list { @@ -4985,6 +5166,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5159,7 +5341,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5173,7 +5355,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5184,7 +5366,7 @@ color: #495057; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5224,6 +5406,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #ffffff; @@ -5266,7 +5449,7 @@ color: #495057; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5280,7 +5463,7 @@ color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5291,7 +5474,7 @@ color: #495057; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-slidemenu.p-slidemenu-overlay { @@ -5338,6 +5521,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5382,6 +5566,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -5452,6 +5637,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.2rem #df9eea; } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5502,7 +5688,7 @@ color: #495057; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5516,7 +5702,7 @@ color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5527,7 +5713,7 @@ color: #495057; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #6c757d; } .p-tieredmenu .p-menuitem-separator { @@ -5541,6 +5727,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5596,6 +5783,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5684,6 +5872,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5734,7 +5923,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5744,7 +5933,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5754,7 +5943,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5764,9 +5953,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5797,7 +5987,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5854,7 +6044,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5864,7 +6054,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5873,23 +6063,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5913,6 +6109,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #dee2e6; border-radius: 3px; @@ -5933,9 +6130,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #9C27B0; color: #ffffff; @@ -5977,6 +6176,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #dee2e6; color: #495057; @@ -6012,6 +6212,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6026,6 +6227,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6041,6 +6243,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6062,6 +6265,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #e9ecef; border-radius: 3px; @@ -6069,6 +6273,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #9C27B0; color: #ffffff; @@ -6101,6 +6306,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #495057; @@ -6118,9 +6324,11 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #9C27B0; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #9C27B0; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #9C27B0; } diff --git a/src/assets/components/themes/soho-dark/theme.css b/src/assets/components/themes/soho-dark/theme.css index 687e0fb9a5e..f936d2eb183 100644 --- a/src/assets/components/themes/soho-dark/theme.css +++ b/src/assets/components/themes/soho-dark/theme.css @@ -10,7 +10,7 @@ --text-color: rgba(255, 255, 255, 0.87); --text-color-secondary: rgba(255, 255, 255, 0.6); --primary-color: #b19df7; - --primary-color-text: hsl(234, 15%, 13%); + --primary-color-text: #1c1d26; --surface-0: #1d1e27; --surface-50: #34343d; --surface-100: #4a4b52; @@ -53,21 +53,24 @@ font-family: "Lato"; font-style: normal; font-weight: 300; - src: local("Lato Light"), local("Lato-Light"), url("./fonts/lato-v17-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Lato Light"), local("Lato-Light"), url("./fonts/lato-v17-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-300.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* lato-regular - latin-ext_latin */ @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; - src: local("Lato Regular"), local("Lato-Regular"), url("./fonts/lato-v17-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Lato Regular"), local("Lato-Regular"), url("./fonts/lato-v17-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* lato-700 - latin-ext_latin */ @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; - src: local("Lato Bold"), local("Lato-Bold"), url("./fonts/lato-v17-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Lato Bold"), local("Lato-Bold"), url("./fonts/lato-v17-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f6fbfe; @@ -295,32 +298,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #ff9a9a; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -332,12 +343,15 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .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; @@ -354,6 +368,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -400,6 +415,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ff9a9a; } + .p-autocomplete-panel { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -446,9 +462,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ff9a9a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -456,19 +474,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ff9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; border-color: #b19df7; } + .p-datepicker { padding: 0.5rem; background: #282936; @@ -495,7 +517,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -505,13 +527,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; @@ -520,14 +542,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #b19df7; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -676,6 +698,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -683,10 +706,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -729,6 +754,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ff9a9a; } + .p-cascadeselect-panel { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -768,6 +794,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #3e4053; } @@ -777,9 +804,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #3e4053; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ff9a9a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -787,6 +816,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -795,6 +825,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -810,7 +841,7 @@ } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; - color: hsl(234, 15%, 13%); + color: #1c1d26; font-size: 14px; } .p-checkbox .p-checkbox-box .p-icon { @@ -833,11 +864,13 @@ .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { border-color: #9378f4; background: #9378f4; - color: hsl(234, 15%, 13%); + color: #1c1d26; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ff9a9a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #3e4053; } @@ -850,12 +883,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #9378f4; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ff9a9a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #b19df7; } @@ -894,9 +930,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ff9a9a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -904,22 +942,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #282936; border: 1px solid #3e4053; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #1d1e27; border: 1px solid #3e4053; @@ -963,6 +1005,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ff9a9a; } + .p-dropdown-panel { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -1026,6 +1069,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #3e4053; } @@ -1038,9 +1082,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ff9a9a; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #282936; color: rgba(255, 255, 255, 0.6); @@ -1053,60 +1105,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #3e4053; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ff9a9a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1114,9 +1184,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ff9a9a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1124,12 +1196,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1168,9 +1242,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #a28af5; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ff9a9a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1203,45 +1279,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ff9a9a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #3e4053; } @@ -1251,14 +1339,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #3e4053; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -1333,9 +1424,11 @@ box-shadow: 0 0 0 1px #e0d8fc; border-color: #b19df7; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ff9a9a; } + .p-multiselect { background: #1d1e27; border: 1px solid #3e4053; @@ -1375,9 +1468,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1385,6 +1480,7 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-multiselect-panel { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -1473,6 +1569,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #3e4053; } @@ -1482,12 +1579,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #3e4053; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ff9a9a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ff9a9a; } + .p-password-panel { padding: 1.25rem; background: #282936; @@ -1509,6 +1609,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1516,6 +1617,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1523,6 +1625,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1549,7 +1652,7 @@ width: 12px; height: 12px; transition-duration: 0.2s; - background-color: hsl(234, 15%, 13%); + background-color: #1c1d26; } .p-radiobutton .p-radiobutton-box.p-highlight { border-color: #b19df7; @@ -1558,11 +1661,13 @@ .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { border-color: #9378f4; background: #9378f4; - color: hsl(234, 15%, 13%); + color: #1c1d26; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ff9a9a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #3e4053; } @@ -1575,9 +1680,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #9378f4; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1608,6 +1715,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #282936; border: 1px solid #3e4053; @@ -1615,7 +1723,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1624,30 +1732,32 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { background: #b19df7; border-color: #b19df7; - color: hsl(234, 15%, 13%); + color: #1c1d26; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { - color: hsl(234, 15%, 13%); +.p-selectbutton .p-button.p-highlight .p-button-icon-right { + color: #1c1d26; } .p-selectbutton .p-button.p-highlight:hover { background: #a28af5; border-color: #a28af5; - color: hsl(234, 15%, 13%); + color: #1c1d26; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { - color: hsl(234, 15%, 13%); +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { + color: #1c1d26; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ff9a9a; } + .p-slider { background: #3e4053; border: 0 none; @@ -1699,6 +1809,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #282936; border: 1px solid #3e4053; @@ -1706,7 +1817,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1715,30 +1826,32 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { background: #b19df7; border-color: #b19df7; - color: hsl(234, 15%, 13%); + color: #1c1d26; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { - color: hsl(234, 15%, 13%); +.p-togglebutton.p-button.p-highlight .p-button-icon-right { + color: #1c1d26; } .p-togglebutton.p-button.p-highlight:hover { background: #a28af5; border-color: #a28af5; - color: hsl(234, 15%, 13%); + color: #1c1d26; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { - color: hsl(234, 15%, 13%); +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + color: #1c1d26; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ff9a9a; } + .p-treeselect { background: #1d1e27; border: 1px solid #3e4053; @@ -1775,12 +1888,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ff9a9a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -1840,6 +1956,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #3e4053; } @@ -1849,6 +1966,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #3e4053; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1856,8 +1974,9 @@ color: rgba(255, 255, 255, 0.6); right: 3rem; } + .p-button { - color: hsl(234, 15%, 13%); + color: #1c1d26; background: #b19df7; border: 1px solid #b19df7; padding: 0.75rem 1.25rem; @@ -1867,12 +1986,12 @@ } .p-button:not(:disabled):hover { background: #a28af5; - color: hsl(234, 15%, 13%); + color: #1c1d26; border-color: #a28af5; } .p-button:not(:disabled):active { background: #9378f4; - color: hsl(234, 15%, 13%); + color: #1c1d26; border-color: #9378f4; } .p-button.p-button-outlined { @@ -1954,7 +2073,7 @@ height: 1rem; line-height: 1rem; color: #b19df7; - background-color: hsl(234, 15%, 13%); + background-color: #1c1d26; } .p-button.p-button-raised { box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); @@ -1967,7 +2086,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1994,426 +2113,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #1d1e27; background: #d4ea93; border: 1px solid #d4ea93; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #c7e473; color: #1d1e27; border-color: #c7e473; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #e1f0b3; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #bbde53; color: #1d1e27; border-color: #bbde53; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #d4ea93; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(212, 234, 147, 0.04); color: #d4ea93; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(212, 234, 147, 0.16); color: #d4ea93; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #d4ea93; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(212, 234, 147, 0.04); border-color: transparent; color: #d4ea93; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(212, 234, 147, 0.16); border-color: transparent; color: #d4ea93; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #1d1e27; background: #9bcaff; border: 1px solid #9bcaff; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #72b4ff; color: #1d1e27; border-color: #72b4ff; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b9daff; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #499fff; color: #1d1e27; border-color: #499fff; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #9bcaff; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(155, 202, 255, 0.04); color: #9bcaff; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(155, 202, 255, 0.16); color: #9bcaff; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #9bcaff; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(155, 202, 255, 0.04); border-color: transparent; color: #9bcaff; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(155, 202, 255, 0.16); border-color: transparent; color: #9bcaff; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #1d1e27; background: #93deac; border: 1px solid #93deac; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #77d596; color: #1d1e27; border-color: #77d596; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #b3e8c5; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #5acd81; color: #1d1e27; border-color: #5acd81; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #93deac; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(147, 222, 172, 0.04); color: #93deac; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(147, 222, 172, 0.16); color: #93deac; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #93deac; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(147, 222, 172, 0.04); border-color: transparent; color: #93deac; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(147, 222, 172, 0.16); border-color: transparent; color: #93deac; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #1d1e27; background: #ffcf91; border: 1px solid #ffcf91; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffbe69; color: #1d1e27; border-color: #ffbe69; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffddb2; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffac41; color: #1d1e27; border-color: #ffac41; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffcf91; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 207, 145, 0.04); color: #ffcf91; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 207, 145, 0.16); color: #ffcf91; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffcf91; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 207, 145, 0.04); border-color: transparent; color: #ffcf91; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 207, 145, 0.16); border-color: transparent; color: #ffcf91; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #1d1e27; background: #86e0e7; border: 1px solid #86e0e7; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #68d8e1; color: #1d1e27; border-color: #68d8e1; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #aae9ee; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #49d0db; color: #1d1e27; border-color: #49d0db; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #86e0e7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(134, 224, 231, 0.04); color: #86e0e7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(134, 224, 231, 0.16); color: #86e0e7; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #86e0e7; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(134, 224, 231, 0.04); border-color: transparent; color: #86e0e7; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(134, 224, 231, 0.16); border-color: transparent; color: #86e0e7; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #1d1e27; background: #eb9a9c; border: 1px solid #eb9a9c; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #e57a7c; color: #1d1e27; border-color: #e57a7c; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f1b8ba; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #de595c; color: #1d1e27; border-color: #de595c; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #eb9a9c; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(235, 154, 156, 0.04); color: #eb9a9c; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(235, 154, 156, 0.16); color: #eb9a9c; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #eb9a9c; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(235, 154, 156, 0.04); border-color: transparent; color: #eb9a9c; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(235, 154, 156, 0.16); border-color: transparent; color: #eb9a9c; } + .p-button.p-button-link { color: #b19df7; background: transparent; @@ -2437,6 +2564,7 @@ color: #b19df7; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2448,14 +2576,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2466,45 +2597,52 @@ background: rgba(255, 255, 255, 0.6); color: #1d1e27; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2582,6 +2720,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #d4ea93; @@ -2610,6 +2749,7 @@ border-color: transparent; color: #d4ea93; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #9bcaff; @@ -2638,6 +2778,7 @@ border-color: transparent; color: #9bcaff; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #93deac; @@ -2666,6 +2807,7 @@ border-color: transparent; color: #93deac; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffcf91; @@ -2694,6 +2836,7 @@ border-color: transparent; color: #ffcf91; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #86e0e7; @@ -2722,6 +2865,7 @@ border-color: transparent; color: #86e0e7; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #eb9a9c; @@ -2750,8 +2894,9 @@ border-color: transparent; color: #eb9a9c; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2762,13 +2907,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; @@ -2794,6 +2939,7 @@ background: rgba(177, 157, 247, 0.16); color: #b19df7; } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2887,9 +3033,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2899,17 +3045,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; @@ -2939,12 +3085,12 @@ background: #b19df7; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #282936; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #282936; } .p-datatable .p-datatable-loading-icon { @@ -3047,6 +3193,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3085,10 +3232,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3116,6 +3265,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3135,6 +3285,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-column-filter-overlay { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -3172,6 +3323,7 @@ border-top: 1px solid #3e4053; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #3e4053; @@ -3200,6 +3352,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3285,6 +3438,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3293,6 +3447,7 @@ background: #282936; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3331,6 +3486,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-paginator { background: #282936; color: rgba(255, 255, 255, 0.6); @@ -3340,9 +3496,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3353,9 +3509,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3412,6 +3568,7 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3497,6 +3654,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3505,30 +3663,32 @@ background: #282936; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #b19df7; border-radius: 50%; width: 1rem; height: 1rem; - background-color: hsl(234, 15%, 13%); + background-color: #1c1d26; } .p-timeline .p-timeline-event-connector { background-color: #3e4053; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #3e4053; background: #282936; @@ -3585,11 +3745,11 @@ color: #b19df7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #b19df7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #b19df7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3662,6 +3822,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3801,7 +3962,7 @@ background: #b19df7; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #282936; } .p-treetable .p-treetable-loading-icon { @@ -3862,6 +4023,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #282936; color: rgba(255, 255, 255, 0.6); @@ -3886,6 +4048,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #3e4053; @@ -3934,6 +4097,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -3959,6 +4123,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #282936; } @@ -3982,6 +4147,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #3e4053; background: #282936; @@ -4022,6 +4188,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #3e4053; padding: 1.25rem; @@ -4088,6 +4255,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #3e4053; border: 0 none; @@ -4098,6 +4266,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-splitter { border: 1px solid #3e4053; background: #282936; @@ -4119,6 +4288,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #3e4053; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4187,6 +4357,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #282936; border: 1px solid #3e4053; @@ -4197,6 +4368,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -4244,6 +4416,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4316,6 +4489,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -4328,7 +4502,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #b19df7; - color: hsl(234, 15%, 13%); + color: #1c1d26; width: 2rem; height: 2rem; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4339,7 +4513,7 @@ } .p-overlaypanel .p-overlaypanel-close:enabled:hover { background: #a28af5; - color: hsl(234, 15%, 13%); + color: #1c1d26; } .p-overlaypanel:after { border: solid transparent; @@ -4357,6 +4531,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #3e4053; } + .p-sidebar { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -4367,7 +4542,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4377,13 +4552,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; @@ -4397,6 +4572,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #3e4053; color: rgba(255, 255, 255, 0.87); @@ -4416,6 +4592,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #3e4053; } + .p-fileupload .p-fileupload-buttonbar { background: #282936; padding: 1.25rem; @@ -4455,16 +4632,18 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #a28af5; - color: hsl(234, 15%, 13%); + color: #1c1d26; border-color: #a28af5; } .p-fileupload-choose:not(.p-disabled):active { background: #9378f4; - color: hsl(234, 15%, 13%); + color: #1c1d26; border-color: #9378f4; } + .p-breadcrumb { background: #333544; border: 1px solid #3e4053; @@ -4496,6 +4675,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #333544; @@ -4543,7 +4723,7 @@ color: #b19df7; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b19df7; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4557,7 +4737,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4568,7 +4748,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4582,6 +4762,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4605,31 +4786,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4688,7 +4870,7 @@ color: #b19df7; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b19df7; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4702,7 +4884,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4713,7 +4895,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4771,9 +4953,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #333544; @@ -4810,7 +4993,7 @@ color: #b19df7; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b19df7; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4824,7 +5007,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4835,7 +5018,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4858,7 +5041,7 @@ } .p-menu .p-menuitem-badge { background: #b19df7; - color: hsl(234, 15%, 13%); + color: #1c1d26; font-size: 0.75rem; font-weight: 700; min-width: 1.5rem; @@ -4869,6 +5052,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #333544; @@ -4907,7 +5091,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4938,7 +5122,7 @@ color: #b19df7; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b19df7; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4952,7 +5136,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4963,7 +5147,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4980,6 +5164,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5154,7 +5339,7 @@ color: #b19df7; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b19df7; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5168,7 +5353,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5179,7 +5364,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5195,6 +5380,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.25rem 0; background: #333544; @@ -5237,7 +5423,7 @@ color: #b19df7; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b19df7; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5251,7 +5437,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5262,7 +5448,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5298,7 +5484,7 @@ } .p-slidemenu .p-menuitem-badge { background: #b19df7; - color: hsl(234, 15%, 13%); + color: #1c1d26; font-size: 0.75rem; font-weight: 700; min-width: 1.5rem; @@ -5309,6 +5495,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5353,6 +5540,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #3e4053; @@ -5360,7 +5548,7 @@ } .p-tabmenu .p-tabmenu-nav .p-menuitem-badge { background: #b19df7; - color: hsl(234, 15%, 13%); + color: #1c1d26; font-size: 0.75rem; font-weight: 700; min-width: 1.5rem; @@ -5423,6 +5611,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #e0d8fc; } + .p-tieredmenu { padding: 0.25rem 0; background: #333544; @@ -5473,7 +5662,7 @@ color: #b19df7; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #b19df7; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5487,7 +5676,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5498,7 +5687,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5512,6 +5701,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5567,6 +5757,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5655,6 +5846,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5705,7 +5897,7 @@ color: #696cff; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #696cff; } .p-toast .p-toast-message.p-toast-message-success { @@ -5715,7 +5907,7 @@ color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5725,7 +5917,7 @@ color: #cc8925; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #cc8925; } .p-toast .p-toast-message.p-toast-message-error { @@ -5735,9 +5927,10 @@ color: #ff5757; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #ff5757; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5768,7 +5961,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5825,7 +6018,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5835,7 +6028,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5844,23 +6037,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5884,6 +6083,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #3e4053; border-radius: 6px; @@ -5904,12 +6104,14 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #282936; } + .p-badge { background: #b19df7; - color: hsl(234, 15%, 13%); + color: #1c1d26; font-size: 0.75rem; font-weight: 700; min-width: 1.5rem; @@ -5948,6 +6150,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #3e4053; color: rgba(255, 255, 255, 0.87); @@ -5983,6 +6186,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5997,6 +6201,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6009,9 +6214,10 @@ background: #b19df7; } .p-progressbar .p-progressbar-label { - color: hsl(234, 15%, 13%); + color: #1c1d26; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6033,6 +6239,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -6040,9 +6247,10 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #b19df7; - color: hsl(234, 15%, 13%); + color: #1c1d26; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.4rem; @@ -6072,6 +6280,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #282936; color: rgba(255, 255, 255, 0.87); @@ -6088,12 +6297,14 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #b19df7; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #b19df7; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #b19df7; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #b19df7; } diff --git a/src/assets/components/themes/soho-light/theme.css b/src/assets/components/themes/soho-light/theme.css index 9cefe419df5..50273159d83 100644 --- a/src/assets/components/themes/soho-light/theme.css +++ b/src/assets/components/themes/soho-light/theme.css @@ -53,21 +53,24 @@ font-family: "Lato"; font-style: normal; font-weight: 300; - src: local("Lato Light"), local("Lato-Light"), url("./fonts/lato-v17-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Lato Light"), local("Lato-Light"), url("./fonts/lato-v17-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-300.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* lato-regular - latin-ext_latin */ @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; - src: local("Lato Regular"), local("Lato-Regular"), url("./fonts/lato-v17-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Lato Regular"), local("Lato-Regular"), url("./fonts/lato-v17-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* lato-700 - latin-ext_latin */ @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; - src: local("Lato Bold"), local("Lato-Bold"), url("./fonts/lato-v17-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local("Lato Bold"), local("Lato-Bold"), url("./fonts/lato-v17-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/lato-v17-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f6fbfe; @@ -295,32 +298,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #ff6767; } + .p-text-secondary { color: #708da9; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -332,12 +343,15 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .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; @@ -354,6 +368,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -400,6 +415,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ff6767; } + .p-autocomplete-panel { background: #ffffff; color: #043d75; @@ -446,9 +462,11 @@ color: #043d75; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ff6767; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -456,19 +474,23 @@ color: #708da9; right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #708da9; right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ff6767; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; border-color: #7254f3; } + .p-datepicker { padding: 0.5rem; background: linear-gradient(90deg, #7254f3 0%, #9554f3 100%); @@ -495,7 +517,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #708da9; @@ -505,13 +527,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #043d75; border-color: transparent; background: #f6f9fc; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; @@ -520,14 +542,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #ffffff; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 700; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #7254f3; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -676,6 +698,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -683,10 +706,12 @@ color: #708da9; right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #708da9; right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -729,6 +754,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ff6767; } + .p-cascadeselect-panel { background: #ffffff; color: #043d75; @@ -768,6 +794,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f6f9fc; } @@ -777,9 +804,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ff6767; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -787,6 +816,7 @@ color: #708da9; right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -795,6 +825,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 22px; height: 22px; @@ -835,9 +866,11 @@ background: #5935f1; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ff6767; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f6f9fc; } @@ -850,12 +883,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #5935f1; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ff6767; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #7254f3; } @@ -894,9 +930,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ff6767; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -904,22 +942,26 @@ color: #708da9; right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #323232; border: 1px solid #191919; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { background: #ffffff; border: 1px solid #d3dbe3; @@ -963,6 +1005,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ff6767; } + .p-dropdown-panel { background: #ffffff; color: #043d75; @@ -1026,6 +1069,7 @@ color: #043d75; background: transparent; } + .p-input-filled .p-dropdown { background: #f6f9fc; } @@ -1038,9 +1082,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ff6767; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f6f9fc; color: #708da9; @@ -1053,60 +1105,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #d3dbe3; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #708da9; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #708da9; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ff6767; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1114,9 +1184,11 @@ color: #708da9; right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ff6767; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1124,12 +1196,14 @@ color: #708da9; right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1168,9 +1242,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #6545f2; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ff6767; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1203,45 +1279,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: #708da9; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ff6767; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: #708da9; } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: #708da9; } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: #708da9; } + :-moz-placeholder { color: #708da9; } + ::-moz-placeholder { color: #708da9; } + :-ms-input-placeholder { color: #708da9; } + .p-input-filled .p-inputtext { background-color: #f6f9fc; } @@ -1251,14 +1339,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #ffffff; color: #043d75; @@ -1333,9 +1424,11 @@ box-shadow: 0 0 0 1px #c7bbfa; border-color: #7254f3; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ff6767; } + .p-multiselect { background: #ffffff; border: 1px solid #d3dbe3; @@ -1375,9 +1468,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1385,6 +1480,7 @@ color: #708da9; right: 3rem; } + .p-multiselect-panel { background: #ffffff; color: #043d75; @@ -1473,6 +1569,7 @@ color: #043d75; background: transparent; } + .p-input-filled .p-multiselect { background: #f6f9fc; } @@ -1482,12 +1579,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ff6767; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ff6767; } + .p-password-panel { padding: 1.25rem; background: #ffffff; @@ -1509,6 +1609,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1516,6 +1617,7 @@ color: #708da9; right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1523,6 +1625,7 @@ color: #708da9; right: 2.5rem; } + .p-radiobutton { width: 22px; height: 22px; @@ -1560,9 +1663,11 @@ background: #5935f1; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ff6767; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f6f9fc; } @@ -1575,9 +1680,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #5935f1; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1608,6 +1715,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #e73d3e; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #d3dbe3; @@ -1615,7 +1723,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #708da9; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1624,7 +1732,7 @@ color: #043d75; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #708da9; } .p-selectbutton .p-button.p-highlight { @@ -1633,7 +1741,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1642,12 +1750,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ff6767; } + .p-slider { background: #dfe7ef; border: 0 none; @@ -1699,6 +1809,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #d3dbe3; @@ -1706,7 +1817,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #708da9; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1715,7 +1826,7 @@ color: #043d75; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #708da9; } .p-togglebutton.p-button.p-highlight { @@ -1724,7 +1835,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1733,12 +1844,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ff6767; } + .p-treeselect { background: #ffffff; border: 1px solid #d3dbe3; @@ -1775,12 +1888,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ff6767; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: #043d75; @@ -1840,6 +1956,7 @@ color: #043d75; background: transparent; } + .p-input-filled .p-treeselect { background: #f6f9fc; } @@ -1849,6 +1966,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1856,6 +1974,7 @@ color: #708da9; right: 3rem; } + .p-button { color: #ffffff; background: #7254f3; @@ -1967,7 +2086,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1994,426 +2113,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #a1c30d; border: 1px solid #a1c30d; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #91b00c; color: #ffffff; border-color: #91b00c; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e4f78e; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #819c0a; color: #ffffff; border-color: #819c0a; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #a1c30d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(161, 195, 13, 0.04); color: #a1c30d; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(161, 195, 13, 0.16); color: #a1c30d; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #a1c30d; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(161, 195, 13, 0.04); border-color: transparent; color: #a1c30d; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(161, 195, 13, 0.16); border-color: transparent; color: #a1c30d; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #5486f3; border: 1px solid #5486f3; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #3570f1; color: #ffffff; border-color: #3570f1; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bbcffa; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #175bef; color: #ffffff; border-color: #175bef; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #5486f3; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(84, 134, 243, 0.04); color: #5486f3; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(84, 134, 243, 0.16); color: #5486f3; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #5486f3; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(84, 134, 243, 0.04); border-color: transparent; color: #5486f3; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(84, 134, 243, 0.16); border-color: transparent; color: #5486f3; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #29c76f; border: 1px solid #29c76f; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #25b364; color: #ffffff; border-color: #25b364; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #a5edc5; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #219f59; color: #ffffff; border-color: #219f59; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #29c76f; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(41, 199, 111, 0.04); color: #29c76f; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(41, 199, 111, 0.16); color: #29c76f; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #29c76f; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(41, 199, 111, 0.04); border-color: transparent; color: #29c76f; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(41, 199, 111, 0.16); border-color: transparent; color: #29c76f; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #ff9f42; border: 1px solid #ff9f42; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ff8f22; color: #ffffff; border-color: #ff8f22; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #ffd9b3; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ff7e02; color: #ffffff; border-color: #ff7e02; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ff9f42; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 159, 66, 0.04); color: #ff9f42; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 159, 66, 0.16); color: #ff9f42; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ff9f42; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 159, 66, 0.04); border-color: transparent; color: #ff9f42; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 159, 66, 0.16); border-color: transparent; color: #ff9f42; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #3ec9d6; border: 1px solid #3ec9d6; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #2cbfcd; color: #ffffff; border-color: #2cbfcd; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #b2e9ef; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #27aab6; color: #ffffff; border-color: #27aab6; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #3ec9d6; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(62, 201, 214, 0.04); color: #3ec9d6; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(62, 201, 214, 0.16); color: #3ec9d6; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #3ec9d6; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(62, 201, 214, 0.04); border-color: transparent; color: #3ec9d6; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(62, 201, 214, 0.16); border-color: transparent; color: #3ec9d6; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #ea5455; border: 1px solid #ea5455; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #e73839; color: #ffffff; border-color: #e73839; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #f7bbbb; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #e31c1d; color: #ffffff; border-color: #e31c1d; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ea5455; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(234, 84, 85, 0.04); color: #ea5455; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(234, 84, 85, 0.16); color: #ea5455; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ea5455; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(234, 84, 85, 0.04); border-color: transparent; color: #ea5455; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(234, 84, 85, 0.16); border-color: transparent; color: #ea5455; } + .p-button.p-button-link { color: #5935f1; background: transparent; @@ -2437,6 +2564,7 @@ color: #5935f1; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2448,14 +2576,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2466,45 +2597,52 @@ background: #022354; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2582,6 +2720,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #a1c30d; @@ -2610,6 +2749,7 @@ border-color: transparent; color: #a1c30d; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #5486f3; @@ -2638,6 +2778,7 @@ border-color: transparent; color: #5486f3; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #29c76f; @@ -2666,6 +2807,7 @@ border-color: transparent; color: #29c76f; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ff9f42; @@ -2694,6 +2836,7 @@ border-color: transparent; color: #ff9f42; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #3ec9d6; @@ -2722,6 +2865,7 @@ border-color: transparent; color: #3ec9d6; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ea5455; @@ -2750,8 +2894,9 @@ border-color: transparent; color: #ea5455; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #708da9; @@ -2762,13 +2907,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #043d75; border-color: transparent; background: #f6f9fc; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; @@ -2794,6 +2939,7 @@ background: #e2dcfc; color: #7254f3; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2887,9 +3033,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #708da9; @@ -2899,17 +3045,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #043d75; border-color: transparent; background: #f6f9fc; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; @@ -2939,12 +3085,12 @@ background: #7254f3; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #eff3f8; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #eff3f8; } .p-datatable .p-datatable-loading-icon { @@ -3047,6 +3193,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3085,10 +3232,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3116,6 +3265,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3135,6 +3285,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-column-filter-overlay { background: #ffffff; color: #043d75; @@ -3172,6 +3323,7 @@ border-top: 1px solid #dfe7ef; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem 1.25rem; border-bottom: 1px solid #dfe7ef; @@ -3200,6 +3352,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3285,6 +3438,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #f6f9fc; } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3293,6 +3447,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f6f9fc; color: #043d75; @@ -3331,6 +3486,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-paginator { background: #ffffff; color: #708da9; @@ -3340,9 +3496,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #708da9; @@ -3353,9 +3509,9 @@ border-radius: 50%; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #f6f9fc; border-color: transparent; color: #043d75; @@ -3412,6 +3568,7 @@ border-color: transparent; color: #043d75; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3497,6 +3654,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #f6f9fc; } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1.25rem; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); @@ -3505,6 +3663,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #7254f3; border-radius: 50%; @@ -3516,19 +3675,20 @@ background-color: #dfe7ef; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #dfe7ef; background: #ffffff; @@ -3585,11 +3745,11 @@ color: #7254f3; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #7254f3; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #7254f3; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3662,6 +3822,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3801,7 +3962,7 @@ background: #7254f3; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #eff3f8; } .p-treetable .p-treetable-loading-icon { @@ -3862,6 +4023,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #eff3f8; color: #708da9; @@ -3886,6 +4048,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #dfe7ef; @@ -3934,6 +4097,7 @@ .p-accordion p-accordiontab .p-accordion-tab { margin-bottom: 4px; } + .p-card { background: #ffffff; color: #043d75; @@ -3959,6 +4123,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -3982,6 +4147,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #dfe7ef; background: #ffffff; @@ -4022,6 +4188,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #dfe7ef; padding: 1.25rem; @@ -4088,6 +4255,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #eff3f8; border: 0 none; @@ -4098,6 +4266,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-splitter { border: 1px solid #dfe7ef; background: #ffffff; @@ -4119,6 +4288,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #dfe7ef; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4187,6 +4357,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #eff3f8; border: 1px solid #dfe7ef; @@ -4197,6 +4368,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #043d75; @@ -4244,6 +4416,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); @@ -4316,6 +4489,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #043d75; @@ -4357,6 +4531,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #043d75; @@ -4367,7 +4542,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #708da9; @@ -4377,13 +4552,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #043d75; border-color: transparent; background: #f6f9fc; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; @@ -4397,6 +4572,7 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #043d75; color: #ffffff; @@ -4416,6 +4592,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #043d75; } + .p-fileupload .p-fileupload-buttonbar { background: #eff3f8; padding: 1.25rem; @@ -4455,6 +4632,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #6545f2; color: #ffffff; @@ -4465,6 +4643,7 @@ color: #ffffff; border-color: #5935f1; } + .p-breadcrumb { background: #eff3f8; border: 1px solid #dfe7ef; @@ -4496,6 +4675,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #708da9; } + .p-contextmenu { padding: 0.25rem 0; background: #eff3f8; @@ -4543,7 +4723,7 @@ color: #7254f3; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #7254f3; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4557,7 +4737,7 @@ color: #043d75; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #043d75; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4568,7 +4748,7 @@ color: #043d75; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #708da9; } .p-contextmenu .p-menuitem-separator { @@ -4582,6 +4762,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4605,31 +4786,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4688,7 +4870,7 @@ color: #7254f3; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #7254f3; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4702,7 +4884,7 @@ color: #043d75; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #043d75; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4713,7 +4895,7 @@ color: #043d75; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #708da9; } .p-megamenu .p-megamenu-panel { @@ -4771,9 +4953,10 @@ color: #043d75; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #708da9; } + .p-menu { padding: 0.25rem 0; background: #eff3f8; @@ -4810,7 +4993,7 @@ color: #7254f3; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #7254f3; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4824,7 +5007,7 @@ color: #043d75; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #043d75; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4835,7 +5018,7 @@ color: #043d75; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #708da9; } .p-menu.p-menu-overlay { @@ -4869,6 +5052,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #eff3f8; @@ -4907,7 +5091,7 @@ color: #043d75; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #708da9; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4938,7 +5122,7 @@ color: #7254f3; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #7254f3; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4952,7 +5136,7 @@ color: #043d75; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #043d75; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4963,7 +5147,7 @@ color: #043d75; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #708da9; } .p-menubar .p-submenu-list { @@ -4980,6 +5164,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5154,7 +5339,7 @@ color: #7254f3; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #7254f3; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5168,7 +5353,7 @@ color: #043d75; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #043d75; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5179,7 +5364,7 @@ color: #043d75; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #708da9; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5195,6 +5380,7 @@ .p-panelmenu .p-panelmenu-panel { margin-bottom: 4px; } + .p-slidemenu { padding: 0.25rem 0; background: #eff3f8; @@ -5237,7 +5423,7 @@ color: #7254f3; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #7254f3; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5251,7 +5437,7 @@ color: #043d75; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #043d75; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5262,7 +5448,7 @@ color: #043d75; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #708da9; } .p-slidemenu.p-slidemenu-overlay { @@ -5309,6 +5495,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5353,6 +5540,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #dfe7ef; @@ -5423,6 +5611,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #c7bbfa; } + .p-tieredmenu { padding: 0.25rem 0; background: #eff3f8; @@ -5473,7 +5662,7 @@ color: #7254f3; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #7254f3; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5487,7 +5676,7 @@ color: #043d75; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #043d75; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5498,7 +5687,7 @@ color: #043d75; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #708da9; } .p-tieredmenu .p-menuitem-separator { @@ -5512,6 +5701,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5567,6 +5757,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5655,6 +5846,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5705,7 +5897,7 @@ color: #696cff; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #696cff; } .p-toast .p-toast-message.p-toast-message-success { @@ -5715,7 +5907,7 @@ color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #1ea97c; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5725,7 +5917,7 @@ color: #cc8925; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #cc8925; } .p-toast .p-toast-message.p-toast-message-error { @@ -5735,9 +5927,10 @@ color: #ff5757; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #ff5757; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5768,7 +5961,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5825,7 +6018,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #eff3f8; @@ -5835,7 +6028,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #eff3f8; } @@ -5844,23 +6037,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5884,6 +6083,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #dfe7ef; border-radius: 6px; @@ -5904,9 +6104,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #7254f3; color: #ffffff; @@ -5948,6 +6150,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #dfe7ef; color: #043d75; @@ -5983,6 +6186,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 6px; @@ -5997,6 +6201,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6012,6 +6217,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6033,6 +6239,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #dfe7ef; border-radius: 6px; @@ -6040,6 +6247,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #7254f3; color: #ffffff; @@ -6072,6 +6280,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #043d75; @@ -6087,11 +6296,11 @@ /* Customizations to the designer theme should be defined here */ @layer primeng { .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { color: #ffffff; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #ffffff; background-color: rgba(255, 255, 255, 0.2); } @@ -6137,15 +6346,19 @@ color: #ffffff; background: rgba(255, 255, 255, 0.3); } + .p-button .p-button-label { font-weight: 700; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #7254f3; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #7254f3; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #7254f3; } diff --git a/src/assets/components/themes/tailwind-light/theme.css b/src/assets/components/themes/tailwind-light/theme.css index 8ee69e98f66..cfc3493813c 100644 --- a/src/assets/components/themes/tailwind-light/theme.css +++ b/src/assets/components/themes/tailwind-light/theme.css @@ -55,31 +55,36 @@ font-family: "Inter"; font-style: normal; font-weight: 300; - src: local(""), url("./fonts/Inter-Light.woff2") format("woff2"), url("./fonts/Inter-Light.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/Inter-Light.woff2") format("woff2"), url("./fonts/Inter-Light.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; - src: local(""), url("./fonts/Inter-Regular.woff2") format("woff2"), url("./fonts/Inter-Regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/Inter-Regular.woff2") format("woff2"), url("./fonts/Inter-Regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; - src: local(""), url("./fonts/Inter-Medium.woff2") format("woff2"), url("./fonts/Inter-Medium.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/Inter-Medium.woff2") format("woff2"), url("./fonts/Inter-Medium.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; - src: local(""), url("./fonts/Inter-SemiBold.woff2") format("woff2"), url("./fonts/Inter-SemiBold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/Inter-SemiBold.woff2") format("woff2"), url("./fonts/Inter-SemiBold.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; - src: local(""), url("./fonts/Inter-Bold.woff2") format("woff2"), url("./fonts/Inter-Bold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/Inter-Bold.woff2") format("woff2"), url("./fonts/Inter-Bold.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f5f9ff; @@ -243,7 +248,7 @@ .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-radius: 0.375rem; padding: 0.25rem 0; } @@ -307,32 +312,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #e24c4c; } + .p-text-secondary { color: #71717a; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -344,12 +357,15 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .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; @@ -366,6 +382,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -412,12 +429,13 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f0a9a7; } + .p-autocomplete-panel { background: #ffffff; color: #3f3f46; border: 0 none; border-radius: 0.375rem; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-autocomplete-panel .p-autocomplete-items { padding: 0.25rem 0; @@ -458,9 +476,11 @@ color: #3f3f46; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f0a9a7; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -468,19 +488,23 @@ color: #71717a; right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #71717a; right: 3.75rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f0a9a7; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; border-color: #4f46e5; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -491,7 +515,7 @@ .p-datepicker:not(.p-datepicker-inline) { background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { background: #ffffff; @@ -507,7 +531,7 @@ border-top-left-radius: 0.375rem; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #71717a; @@ -517,13 +541,13 @@ transition: none; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #18181b; border-color: transparent; background: #f4f4f5; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; @@ -532,14 +556,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #3f3f46; transition: none; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #4f46e5; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -688,6 +712,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -695,10 +720,12 @@ color: #71717a; right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #71717a; right: 3.75rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -741,12 +768,13 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f0a9a7; } + .p-cascadeselect-panel { background: #ffffff; color: #3f3f46; border: 0 none; border-radius: 0.375rem; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-cascadeselect-panel .p-cascadeselect-items { padding: 0.25rem 0; @@ -780,6 +808,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #fafafa; } @@ -789,9 +818,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f0a9a7; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -799,6 +830,7 @@ color: #71717a; right: 3rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -807,6 +839,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 16px; height: 16px; @@ -847,9 +880,11 @@ background: #4f46e5; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f0a9a7; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #fafafa; } @@ -862,12 +897,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #4f46e5; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f0a9a7; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #d4d4d8; } @@ -906,9 +944,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f0a9a7; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -916,22 +956,26 @@ color: #71717a; right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #27272a; border: 1px solid #18181b; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } + .p-dropdown { background: #ffffff; border: 1px solid #d4d4d8; @@ -975,12 +1019,13 @@ .p-dropdown.p-invalid.p-component { border-color: #f0a9a7; } + .p-dropdown-panel { background: #ffffff; color: #3f3f46; border: 0 none; border-radius: 0.375rem; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-dropdown-panel .p-dropdown-header { padding: 0.5rem 0.75rem; @@ -1038,6 +1083,7 @@ color: #3f3f46; background: transparent; } + .p-input-filled .p-dropdown { background: #fafafa; } @@ -1050,9 +1096,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f0a9a7; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #fafafa; color: #71717a; @@ -1065,60 +1119,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #d4d4d8; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 3rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #71717a; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #71717a; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f0a9a7; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1126,9 +1198,11 @@ color: #71717a; right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f0a9a7; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1136,12 +1210,14 @@ color: #71717a; right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.75rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.75rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1180,9 +1256,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #4338ca; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f0a9a7; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1215,45 +1293,57 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: #71717a; transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f0a9a7; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: #71717a; } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: #71717a; } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: #71717a; } + :-moz-placeholder { color: #71717a; } + ::-moz-placeholder { color: #71717a; } + :-ms-input-placeholder { color: #71717a; } + .p-input-filled .p-inputtext { background-color: #fafafa; } @@ -1263,14 +1353,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #ffffff; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-listbox { background: #ffffff; color: #3f3f46; @@ -1345,9 +1438,11 @@ box-shadow: 0 0 0 1px #6366f1; border-color: #4f46e5; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f0a9a7; } + .p-multiselect { background: #ffffff; border: 1px solid #d4d4d8; @@ -1387,9 +1482,11 @@ border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1397,12 +1494,13 @@ color: #71717a; right: 3rem; } + .p-multiselect-panel { background: #ffffff; color: #3f3f46; border: 0 none; border-radius: 0.375rem; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-multiselect-panel .p-multiselect-header { padding: 0.5rem 0.75rem; @@ -1485,6 +1583,7 @@ color: #3f3f46; background: transparent; } + .p-input-filled .p-multiselect { background: #fafafa; } @@ -1494,18 +1593,21 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f0a9a7; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f0a9a7; } + .p-password-panel { padding: 1.25rem; background: #ffffff; color: #3f3f46; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-radius: 0.375rem; } .p-password-panel .p-password-meter { @@ -1521,6 +1623,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #22c55e; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1528,6 +1631,7 @@ color: #71717a; right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1535,6 +1639,7 @@ color: #71717a; right: 2.5rem; } + .p-radiobutton { width: 16px; height: 16px; @@ -1572,9 +1677,11 @@ background: #4f46e5; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f0a9a7; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #fafafa; } @@ -1587,9 +1694,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #4f46e5; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1620,6 +1729,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #dc2626; } + .p-selectbutton .p-button { background: #ffffff; border: 1px solid #d4d4d8; @@ -1627,7 +1737,7 @@ transition: none; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #71717a; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1636,7 +1746,7 @@ color: #3f3f46; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #71717a; } .p-selectbutton .p-button.p-highlight { @@ -1645,7 +1755,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1654,12 +1764,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f0a9a7; } + .p-slider { background: #e5e7eb; border: 0 none; @@ -1711,6 +1823,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #ffffff; border: 1px solid #d4d4d8; @@ -1718,7 +1831,7 @@ transition: none; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #71717a; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1727,7 +1840,7 @@ color: #3f3f46; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #71717a; } .p-togglebutton.p-button.p-highlight { @@ -1736,7 +1849,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1745,12 +1858,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f0a9a7; } + .p-treeselect { background: #ffffff; border: 1px solid #d4d4d8; @@ -1787,18 +1902,21 @@ border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f0a9a7; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.375rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: #3f3f46; border: 0 none; border-radius: 0.375rem; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-treeselect-panel .p-treeselect-header { padding: 0.5rem 0.75rem; @@ -1852,6 +1970,7 @@ color: #3f3f46; background: transparent; } + .p-input-filled .p-treeselect { background: #fafafa; } @@ -1861,6 +1980,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1868,6 +1988,7 @@ color: #71717a; right: 3rem; } + .p-button { color: #ffffff; background: #4f46e5; @@ -1979,7 +2100,7 @@ padding: 0.75rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -2006,426 +2127,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #64748b; border: 1px solid #64748b; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #475569; color: #ffffff; border-color: #475569; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #c0c7d2; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #475569; color: #ffffff; border-color: #475569; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(100, 116, 139, 0.16); color: #64748b; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #64748b; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(100, 116, 139, 0.04); border-color: transparent; color: #64748b; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(100, 116, 139, 0.16); border-color: transparent; color: #64748b; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #3b82f6; border: 1px solid #3b82f6; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #2563eb; color: #ffffff; border-color: #2563eb; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #b1cdfb; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #2563eb; color: #ffffff; border-color: #2563eb; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #3b82f6; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(59, 130, 246, 0.04); color: #3b82f6; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(59, 130, 246, 0.16); color: #3b82f6; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #3b82f6; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(59, 130, 246, 0.04); border-color: transparent; color: #3b82f6; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(59, 130, 246, 0.16); border-color: transparent; color: #3b82f6; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #22c55e; border: 1px solid #22c55e; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #16a34a; color: #ffffff; border-color: #16a34a; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #a0efbd; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #16a34a; color: #ffffff; border-color: #16a34a; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(34, 197, 94, 0.16); color: #22c55e; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #22c55e; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(34, 197, 94, 0.04); border-color: transparent; color: #22c55e; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(34, 197, 94, 0.16); border-color: transparent; color: #22c55e; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #f59e0b; border: 1px solid #f59e0b; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #d97706; color: #ffffff; border-color: #d97706; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fbd89d; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #d97706; color: #ffffff; border-color: #d97706; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #f59e0b; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(245, 158, 11, 0.04); color: #f59e0b; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(245, 158, 11, 0.16); color: #f59e0b; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #f59e0b; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(245, 158, 11, 0.04); border-color: transparent; color: #f59e0b; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(245, 158, 11, 0.16); border-color: transparent; color: #f59e0b; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #a855f7; border: 1px solid #a855f7; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #9333ea; color: #ffffff; border-color: #9333ea; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #dcbbfc; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #9333ea; color: #ffffff; border-color: #9333ea; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(168, 85, 247, 0.16); color: #a855f7; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #a855f7; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(168, 85, 247, 0.04); border-color: transparent; color: #a855f7; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(168, 85, 247, 0.16); border-color: transparent; color: #a855f7; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #ef4444; border: 1px solid #ef4444; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #dc2626; color: #ffffff; border-color: #dc2626; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #f9b4b4; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #dc2626; color: #ffffff; border-color: #dc2626; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(239, 68, 68, 0.16); color: #ef4444; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #ef4444; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(239, 68, 68, 0.04); border-color: transparent; color: #ef4444; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(239, 68, 68, 0.16); border-color: transparent; color: #ef4444; } + .p-button.p-button-link { color: #4f46e5; background: transparent; @@ -2449,6 +2578,7 @@ color: #4f46e5; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2460,14 +2590,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2478,45 +2611,52 @@ background: #27272a; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 0.375rem; } @@ -2594,6 +2734,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #64748b; @@ -2622,6 +2763,7 @@ border-color: transparent; color: #64748b; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #3b82f6; @@ -2650,6 +2792,7 @@ border-color: transparent; color: #3b82f6; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #22c55e; @@ -2678,6 +2821,7 @@ border-color: transparent; color: #22c55e; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #f59e0b; @@ -2706,6 +2850,7 @@ border-color: transparent; color: #f59e0b; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #a855f7; @@ -2734,6 +2879,7 @@ border-color: transparent; color: #a855f7; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #ef4444; @@ -2762,8 +2908,9 @@ border-color: transparent; color: #ef4444; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #71717a; @@ -2774,13 +2921,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #18181b; border-color: transparent; background: #f4f4f5; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; @@ -2806,6 +2953,7 @@ background: #eef2ff; color: #312e81; } + .p-datatable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -2899,9 +3047,9 @@ padding: 1rem 1.5rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #71717a; @@ -2911,17 +3059,17 @@ transition: none; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #18181b; border-color: transparent; background: #f4f4f5; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; @@ -2951,12 +3099,12 @@ background: #4f46e5; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #fafafa; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #fafafa; } .p-datatable .p-datatable-loading-icon { @@ -3059,6 +3207,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 0.9375rem 1.875rem; } + .p-dataview .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3097,10 +3246,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1.25rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3128,6 +3279,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3147,12 +3299,13 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-column-filter-overlay { background: #ffffff; color: #3f3f46; border: 0 none; border-radius: 0.375rem; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); min-width: 12.5rem; } .p-column-filter-overlay .p-column-filter-row-items { @@ -3184,6 +3337,7 @@ border-top: 1px solid #f3f4f6; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 0.75rem; border-bottom: 0 none; @@ -3212,6 +3366,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1.25rem; } + .p-orderlist .p-orderlist-controls { padding: 1.25rem; } @@ -3297,14 +3452,16 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #f4f4f5; } + .p-orderlist-item.cdk-drag-preview { padding: 0.75rem 1rem; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border: 0 none; color: #3f3f46; background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #f4f4f5; color: #18181b; @@ -3343,6 +3500,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-paginator { background: #ffffff; color: #71717a; @@ -3352,9 +3510,9 @@ border-radius: 0.375rem; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 1px solid #d4d4d8; color: #71717a; @@ -3365,9 +3523,9 @@ border-radius: 0; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #f4f4f5; border-color: #d4d4d8; color: #3f3f46; @@ -3424,6 +3582,7 @@ border-color: #d4d4d8; color: #3f3f46; } + .p-picklist .p-picklist-buttons { padding: 1.25rem; } @@ -3509,14 +3668,16 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #f4f4f5; } + .p-picklist-item.cdk-drag-preview { padding: 0.75rem 1rem; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border: 0 none; color: #3f3f46; background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #4f46e5; border-radius: 50%; @@ -3528,19 +3689,20 @@ background-color: #e5e7eb; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3597,11 +3759,11 @@ color: #312e81; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #312e81; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #312e81; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3674,6 +3836,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3813,7 +3976,7 @@ background: #4f46e5; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #fafafa; } .p-treetable .p-treetable-loading-icon { @@ -3874,6 +4037,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 0.9375rem 1.875rem; } + .p-virtualscroller .p-virtualscroller-header { background: #fafafa; color: #3f3f46; @@ -3898,6 +4062,7 @@ border-bottom-left-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1.25rem; border: 1px solid #e5e7eb; @@ -3970,6 +4135,7 @@ border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; } + .p-card { background: #ffffff; color: #3f3f46; @@ -3995,6 +4161,7 @@ .p-card .p-card-footer { padding: 1.25rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -4018,6 +4185,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #e5e7eb; background: #ffffff; @@ -4058,6 +4226,7 @@ .p-fieldset .p-fieldset-content { padding: 1.25rem; } + .p-panel .p-panel-header { border: 1px solid #e5e7eb; padding: 1.25rem; @@ -4124,6 +4293,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #fafafa; border: 0 none; @@ -4134,6 +4304,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-splitter { border: 1px solid #e5e7eb; background: #ffffff; @@ -4155,6 +4326,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 3rem; } @@ -4223,6 +4395,7 @@ border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; } + .p-toolbar { background: #fafafa; border: 1px solid #e5e7eb; @@ -4233,6 +4406,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #3f3f46; @@ -4280,6 +4454,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 0.375rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); @@ -4352,6 +4527,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #3f3f46; @@ -4393,6 +4569,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #3f3f46; @@ -4403,7 +4580,7 @@ padding: 1.25rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #71717a; @@ -4413,13 +4590,13 @@ transition: none; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #18181b; border-color: transparent; background: #f4f4f5; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; @@ -4433,11 +4610,12 @@ .p-sidebar .p-sidebar-footer { padding: 1.25rem; } + .p-tooltip .p-tooltip-text { background: #3f3f46; color: #ffffff; padding: 0.75rem 0.75rem; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-radius: 0.375rem; } .p-tooltip.p-tooltip-right .p-tooltip-arrow { @@ -4452,6 +4630,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #3f3f46; } + .p-fileupload .p-fileupload-buttonbar { background: #fafafa; padding: 1.25rem; @@ -4491,6 +4670,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #4338ca; color: #ffffff; @@ -4501,6 +4681,7 @@ color: #ffffff; border-color: #4338ca; } + .p-breadcrumb { background: #ffffff; border: 1px solid #e5e7eb; @@ -4532,12 +4713,13 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #71717a; } + .p-contextmenu { padding: 0.25rem 0; background: #ffffff; color: #3f3f46; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-radius: 0.375rem; width: 12.5rem; } @@ -4548,7 +4730,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-radius: 0.375rem; } .p-contextmenu .p-menuitem > .p-menuitem-content { @@ -4579,7 +4761,7 @@ color: #3f3f46; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4593,7 +4775,7 @@ color: #18181b; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #18181b; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4604,7 +4786,7 @@ color: #18181b; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-contextmenu .p-menuitem-separator { @@ -4618,6 +4800,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4641,31 +4824,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4724,7 +4908,7 @@ color: #3f3f46; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4738,7 +4922,7 @@ color: #18181b; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #18181b; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4749,14 +4933,14 @@ color: #18181b; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-megamenu .p-megamenu-panel { background: #ffffff; color: #3f3f46; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-megamenu .p-submenu-header { margin: 0; @@ -4807,9 +4991,10 @@ color: #18181b; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #71717a; } + .p-menu { padding: 0.25rem 0; background: #ffffff; @@ -4846,7 +5031,7 @@ color: #3f3f46; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4860,7 +5045,7 @@ color: #18181b; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #18181b; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4871,13 +5056,13 @@ color: #18181b; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-menu.p-menu-overlay { background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-menu .p-submenu-header { margin: 0; @@ -4905,6 +5090,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 1rem; background: #fafafa; @@ -4943,7 +5129,7 @@ color: #18181b; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4974,7 +5160,7 @@ color: #3f3f46; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4988,7 +5174,7 @@ color: #18181b; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #18181b; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4999,14 +5185,14 @@ color: #18181b; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-menubar .p-submenu-list { padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { @@ -5016,6 +5202,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5043,7 +5230,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); width: 100%; } .p-menubar .p-menubar-root-list .p-menuitem-separator { @@ -5190,7 +5377,7 @@ color: #3f3f46; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5204,7 +5391,7 @@ color: #18181b; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #18181b; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5215,7 +5402,7 @@ color: #18181b; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5255,6 +5442,7 @@ border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; } + .p-slidemenu { padding: 0.25rem 0; background: #ffffff; @@ -5297,7 +5485,7 @@ color: #3f3f46; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5311,7 +5499,7 @@ color: #18181b; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #18181b; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5322,19 +5510,19 @@ color: #18181b; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-slidemenu.p-slidemenu-overlay { background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-slidemenu .p-slidemenu-list { padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-slidemenu .p-menuitem-separator { border-top: 1px solid #f3f4f6; @@ -5369,6 +5557,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: none; @@ -5413,6 +5602,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -5483,6 +5673,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #6366f1; } + .p-tieredmenu { padding: 0.25rem 0; background: #ffffff; @@ -5494,7 +5685,7 @@ .p-tieredmenu.p-tieredmenu-overlay { background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-tieredmenu .p-tieredmenu-root-list { outline: 0 none; @@ -5503,7 +5694,7 @@ padding: 0.25rem 0; background: #ffffff; border: 0 none; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .p-tieredmenu .p-menuitem > .p-menuitem-content { color: #3f3f46; @@ -5533,7 +5724,7 @@ color: #3f3f46; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5547,7 +5738,7 @@ color: #18181b; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #18181b; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5558,7 +5749,7 @@ color: #18181b; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #71717a; } .p-tieredmenu .p-menuitem-separator { @@ -5572,6 +5763,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.75rem 0.75rem; margin: 0; @@ -5627,6 +5819,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 0.375rem; @@ -5715,6 +5908,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5765,7 +5959,7 @@ color: #2563eb; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #2563eb; } .p-toast .p-toast-message.p-toast-message-success { @@ -5775,7 +5969,7 @@ color: #059669; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #059669; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5785,7 +5979,7 @@ color: #d97706; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #d97706; } .p-toast .p-toast-message.p-toast-message-error { @@ -5795,9 +5989,10 @@ color: #dc2626; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #dc2626; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5828,7 +6023,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5885,7 +6080,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #fafafa; @@ -5895,7 +6090,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #fafafa; } @@ -5904,23 +6099,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: none; } + .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; @@ -5944,6 +6145,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #e5e7eb; border-radius: 0.375rem; @@ -5964,9 +6166,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #4f46e5; color: #ffffff; @@ -6008,6 +6212,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #e5e7eb; color: #3f3f46; @@ -6043,6 +6248,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.75rem 0.75rem; border-radius: 0.375rem; @@ -6057,6 +6263,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6072,11 +6279,12 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; border-radius: 50%; - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); transition: none; } .p-scrolltop.p-link { @@ -6093,6 +6301,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #f4f4f5; border-radius: 0.375rem; @@ -6100,6 +6309,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #4f46e5; color: #ffffff; @@ -6132,6 +6342,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #3f3f46; @@ -6147,23 +6358,29 @@ /* Customizations to the designer theme should be defined here */ @layer primeng { .p-inputtext, .p-togglebutton, .p-selectbutton, .p-inputgroup { - box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 1px 2px 0 rgba(0, 0, 0, 0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05); } + .p-inputgroup .p-inputtext, .p-inputgroup .p-togglebutton, .p-inputgroup .p-selectbutton { box-shadow: none; } + .p-inputtext.p-invalid.p-component:enabled:focus { box-shadow: 0 0 0 1px #f0a9a7; } + .p-highlight { font-weight: 600; } + .p-button-label { font-weight: 500; } + .p-inputswitch.p-focus .p-inputswitch-slider { box-shadow: 0 0 0 2px #6366f1; } + .p-paginator .p-paginator-pages .p-paginator-page { margin-left: -1px; } @@ -6174,6 +6391,7 @@ .p-paginator .p-paginator-current { border: 0 none; } + .p-button:focus { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #6366f1, 0 1px 2px 0 rgba(0, 0, 0, 0); } @@ -6195,15 +6413,18 @@ .p-button.p-button-danger:enabled:focus { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #ef4444, 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-checkbox .p-checkbox-box { border-radius: 0.25rem; } .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #6366f1, 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-radiobutton:not(.p-radiobutton-disabled) .p-radiobutton-box.p-focus { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #6366f1, 0 1px 2px 0 rgba(0, 0, 0, 0); } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #4f46e5; } diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css index beafcf83cfc..bf354cf1ce7 100644 --- a/src/assets/components/themes/vela-blue/theme.css +++ b/src/assets/components/themes/vela-blue/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #ef9a9a; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-autocomplete-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -427,9 +440,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ef9a9a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -437,19 +452,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; border-color: #64B5F6; } + .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -476,7 +495,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -486,13 +505,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #64B5F6; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -664,10 +684,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #304562; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #304562; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -768,6 +794,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #2396f2; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } @@ -831,12 +861,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #2396f2; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #64B5F6; } @@ -875,9 +908,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ef9a9a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -885,22 +920,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1f2d40; border: 1px solid #304562; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #17212f; border: 1px solid #304562; @@ -944,6 +983,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1007,6 +1047,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #304562; } @@ -1019,9 +1060,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ef9a9a; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1034,60 +1083,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #304562; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1095,9 +1162,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1105,12 +1174,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1149,9 +1220,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #43a5f4; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1184,45 +1257,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ef9a9a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #304562; } @@ -1232,14 +1317,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #304562; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1314,9 +1402,11 @@ box-shadow: 0 0 0 1px #93cbf9; border-color: #64B5F6; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ef9a9a; } + .p-multiselect { background: #17212f; border: 1px solid #304562; @@ -1356,9 +1446,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1366,6 +1458,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1454,6 +1547,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #304562; } @@ -1463,12 +1557,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #304562; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ef9a9a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ef9a9a; } + .p-password-panel { padding: 1rem; background: #1f2d40; @@ -1490,6 +1587,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1497,6 +1595,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1504,6 +1603,7 @@ color: rgba(255, 255, 255, 0.6); right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1541,9 +1641,11 @@ background: #2396f2; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #304562; } @@ -1556,9 +1658,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #2396f2; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1589,6 +1693,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1f2d40; border: 1px solid #304562; @@ -1596,7 +1701,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1605,7 +1710,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1614,7 +1719,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1623,12 +1728,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ef9a9a; } + .p-slider { background: #304562; border: 0 none; @@ -1680,6 +1787,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1f2d40; border: 1px solid #304562; @@ -1687,7 +1795,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1696,7 +1804,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1705,7 +1813,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1714,12 +1822,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ef9a9a; } + .p-treeselect { background: #17212f; border: 1px solid #304562; @@ -1756,12 +1866,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1821,6 +1934,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #304562; } @@ -1830,6 +1944,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #304562; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1837,6 +1952,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #212529; background: #64B5F6; @@ -1948,7 +2064,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1975,426 +2091,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909c; border: 1px solid #78909c; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #121212; background: #ffe082; border: 1px solid #ffe082; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; } + .p-button.p-button-link { color: #64B5F6; background: transparent; @@ -2418,6 +2542,7 @@ color: #64B5F6; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2429,14 +2554,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2447,45 +2575,52 @@ background: rgba(255, 255, 255, 0.6); color: #17212f; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2563,6 +2698,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #78909c; @@ -2591,6 +2727,7 @@ border-color: transparent; color: #78909c; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #81d4fa; @@ -2619,6 +2756,7 @@ border-color: transparent; color: #81d4fa; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2647,6 +2785,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2675,6 +2814,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2703,6 +2843,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f48fb1; @@ -2731,8 +2872,9 @@ border-color: transparent; color: #f48fb1; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2743,13 +2885,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -2775,6 +2917,7 @@ background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2868,9 +3011,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2880,17 +3023,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -2920,12 +3063,12 @@ background: #64B5F6; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1f2d40; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1f2d40; } .p-datatable .p-datatable-loading-icon { @@ -3028,6 +3171,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3066,10 +3210,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3097,6 +3243,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3116,6 +3263,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-column-filter-overlay { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3153,6 +3301,7 @@ border-top: 1px solid #304562; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3181,6 +3330,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3266,6 +3416,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3274,6 +3425,7 @@ background: #1f2d40; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3312,6 +3464,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-paginator { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3321,9 +3474,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3334,9 +3487,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3393,6 +3546,7 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3478,6 +3632,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3486,6 +3641,7 @@ background: #1f2d40; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #64B5F6; border-radius: 50%; @@ -3497,19 +3653,20 @@ background-color: #304562; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #304562; background: #1f2d40; @@ -3566,11 +3723,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3643,6 +3800,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3782,7 +3940,7 @@ background: #64B5F6; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1f2d40; } .p-treetable .p-treetable-loading-icon { @@ -3843,6 +4001,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3867,6 +4026,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #304562; @@ -3939,6 +4099,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3964,6 +4125,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1f2d40; } @@ -3987,6 +4149,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #304562; background: #1f2d40; @@ -4027,6 +4190,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #304562; padding: 1rem; @@ -4093,6 +4257,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; @@ -4103,6 +4268,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-splitter { border: 1px solid #304562; background: #1f2d40; @@ -4124,6 +4290,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #304562; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4192,6 +4359,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #1f2d40; border: 1px solid #304562; @@ -4202,6 +4370,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4249,6 +4418,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4321,6 +4491,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4362,6 +4533,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #304562; } + .p-sidebar { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4372,7 +4544,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4382,13 +4554,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; @@ -4402,6 +4574,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #304562; color: rgba(255, 255, 255, 0.87); @@ -4421,6 +4594,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #304562; } + .p-fileupload .p-fileupload-buttonbar { background: #1f2d40; padding: 1rem; @@ -4460,6 +4634,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #43a5f4; color: #212529; @@ -4470,6 +4645,7 @@ color: #212529; border-color: #2396f2; } + .p-breadcrumb { background: #1f2d40; border: 1px solid #304562; @@ -4501,6 +4677,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #1f2d40; @@ -4548,7 +4725,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4739,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4573,7 +4750,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4587,6 +4764,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4610,31 +4788,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4693,7 +4872,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4707,7 +4886,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4718,7 +4897,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4776,9 +4955,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #1f2d40; @@ -4815,7 +4995,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4829,7 +5009,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4840,7 +5020,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4874,6 +5054,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #1f2d40; @@ -4912,7 +5093,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4943,7 +5124,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4957,7 +5138,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4968,7 +5149,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4985,6 +5166,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5159,7 +5341,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5173,7 +5355,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5184,7 +5366,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5224,6 +5406,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #1f2d40; @@ -5266,7 +5449,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5280,7 +5463,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5291,7 +5474,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5338,6 +5521,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5382,6 +5566,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #304562; @@ -5452,6 +5637,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #93cbf9; } + .p-tieredmenu { padding: 0.25rem 0; background: #1f2d40; @@ -5502,7 +5688,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5516,7 +5702,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5527,7 +5713,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5541,6 +5727,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5596,6 +5783,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5684,6 +5872,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5734,7 +5923,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5744,7 +5933,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5754,7 +5943,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5764,9 +5953,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5797,7 +5987,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5854,7 +6044,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5864,7 +6054,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5873,23 +6063,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5913,6 +6109,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #304562; border-radius: 3px; @@ -5933,9 +6130,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1f2d40; } + .p-badge { background: #64B5F6; color: #212529; @@ -5977,6 +6176,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #304562; color: rgba(255, 255, 255, 0.87); @@ -6012,6 +6212,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6026,6 +6227,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6041,6 +6243,7 @@ color: #212529; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6062,6 +6265,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6069,6 +6273,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #64B5F6; color: #212529; @@ -6101,6 +6306,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -6118,12 +6324,14 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #64B5F6; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #64B5F6; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #64B5F6; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #64B5F6; } diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css index 2220e54bd00..e3af26b3415 100644 --- a/src/assets/components/themes/vela-green/theme.css +++ b/src/assets/components/themes/vela-green/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #ef9a9a; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-autocomplete-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -427,9 +440,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ef9a9a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -437,19 +452,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; border-color: #81C784; } + .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -476,7 +495,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -486,13 +505,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #81C784; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -664,10 +684,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #304562; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #304562; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -768,6 +794,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #54b358; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } @@ -831,12 +861,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #54b358; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #81C784; } @@ -875,9 +908,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ef9a9a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -885,22 +920,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1f2d40; border: 1px solid #304562; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #17212f; border: 1px solid #304562; @@ -944,6 +983,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1007,6 +1047,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #304562; } @@ -1019,9 +1060,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ef9a9a; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1034,60 +1083,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #304562; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1095,9 +1162,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1105,12 +1174,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1149,9 +1220,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #6abd6e; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1184,45 +1257,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ef9a9a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #304562; } @@ -1232,14 +1317,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #304562; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1314,9 +1402,11 @@ box-shadow: 0 0 0 1px #a7d8a9; border-color: #81C784; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ef9a9a; } + .p-multiselect { background: #17212f; border: 1px solid #304562; @@ -1356,9 +1446,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1366,6 +1458,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1454,6 +1547,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #304562; } @@ -1463,12 +1557,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #304562; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ef9a9a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ef9a9a; } + .p-password-panel { padding: 1rem; background: #1f2d40; @@ -1490,6 +1587,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1497,6 +1595,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1504,6 +1603,7 @@ color: rgba(255, 255, 255, 0.6); right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1541,9 +1641,11 @@ background: #54b358; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #304562; } @@ -1556,9 +1658,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #54b358; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1589,6 +1693,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1f2d40; border: 1px solid #304562; @@ -1596,7 +1701,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1605,7 +1710,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1614,7 +1719,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1623,12 +1728,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ef9a9a; } + .p-slider { background: #304562; border: 0 none; @@ -1680,6 +1787,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1f2d40; border: 1px solid #304562; @@ -1687,7 +1795,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1696,7 +1804,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1705,7 +1813,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1714,12 +1822,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ef9a9a; } + .p-treeselect { background: #17212f; border: 1px solid #304562; @@ -1756,12 +1866,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1821,6 +1934,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #304562; } @@ -1830,6 +1944,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #304562; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1837,6 +1952,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #212529; background: #81C784; @@ -1948,7 +2064,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1975,426 +2091,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909c; border: 1px solid #78909c; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #121212; background: #ffe082; border: 1px solid #ffe082; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; } + .p-button.p-button-link { color: #81C784; background: transparent; @@ -2418,6 +2542,7 @@ color: #81C784; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2429,14 +2554,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2447,45 +2575,52 @@ background: rgba(255, 255, 255, 0.6); color: #17212f; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2563,6 +2698,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #78909c; @@ -2591,6 +2727,7 @@ border-color: transparent; color: #78909c; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #81d4fa; @@ -2619,6 +2756,7 @@ border-color: transparent; color: #81d4fa; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2647,6 +2785,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2675,6 +2814,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2703,6 +2843,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f48fb1; @@ -2731,8 +2872,9 @@ border-color: transparent; color: #f48fb1; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2743,13 +2885,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -2775,6 +2917,7 @@ background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2868,9 +3011,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2880,17 +3023,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -2920,12 +3063,12 @@ background: #81C784; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1f2d40; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1f2d40; } .p-datatable .p-datatable-loading-icon { @@ -3028,6 +3171,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3066,10 +3210,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3097,6 +3243,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3116,6 +3263,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-column-filter-overlay { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3153,6 +3301,7 @@ border-top: 1px solid #304562; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3181,6 +3330,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3266,6 +3416,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3274,6 +3425,7 @@ background: #1f2d40; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3312,6 +3464,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-paginator { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3321,9 +3474,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3334,9 +3487,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3393,6 +3546,7 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3478,6 +3632,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3486,6 +3641,7 @@ background: #1f2d40; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #81C784; border-radius: 50%; @@ -3497,19 +3653,20 @@ background-color: #304562; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #304562; background: #1f2d40; @@ -3566,11 +3723,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3643,6 +3800,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3782,7 +3940,7 @@ background: #81C784; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1f2d40; } .p-treetable .p-treetable-loading-icon { @@ -3843,6 +4001,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3867,6 +4026,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #304562; @@ -3939,6 +4099,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3964,6 +4125,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1f2d40; } @@ -3987,6 +4149,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #304562; background: #1f2d40; @@ -4027,6 +4190,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #304562; padding: 1rem; @@ -4093,6 +4257,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; @@ -4103,6 +4268,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-splitter { border: 1px solid #304562; background: #1f2d40; @@ -4124,6 +4290,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #304562; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4192,6 +4359,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #1f2d40; border: 1px solid #304562; @@ -4202,6 +4370,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4249,6 +4418,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4321,6 +4491,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4362,6 +4533,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #304562; } + .p-sidebar { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4372,7 +4544,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4382,13 +4554,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; @@ -4402,6 +4574,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #304562; color: rgba(255, 255, 255, 0.87); @@ -4421,6 +4594,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #304562; } + .p-fileupload .p-fileupload-buttonbar { background: #1f2d40; padding: 1rem; @@ -4460,6 +4634,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #6abd6e; color: #212529; @@ -4470,6 +4645,7 @@ color: #212529; border-color: #54b358; } + .p-breadcrumb { background: #1f2d40; border: 1px solid #304562; @@ -4501,6 +4677,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #1f2d40; @@ -4548,7 +4725,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4739,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4573,7 +4750,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4587,6 +4764,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4610,31 +4788,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4693,7 +4872,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4707,7 +4886,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4718,7 +4897,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4776,9 +4955,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #1f2d40; @@ -4815,7 +4995,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4829,7 +5009,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4840,7 +5020,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4874,6 +5054,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #1f2d40; @@ -4912,7 +5093,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4943,7 +5124,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4957,7 +5138,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4968,7 +5149,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4985,6 +5166,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5159,7 +5341,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5173,7 +5355,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5184,7 +5366,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5224,6 +5406,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #1f2d40; @@ -5266,7 +5449,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5280,7 +5463,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5291,7 +5474,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5338,6 +5521,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5382,6 +5566,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #304562; @@ -5452,6 +5637,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #a7d8a9; } + .p-tieredmenu { padding: 0.25rem 0; background: #1f2d40; @@ -5502,7 +5688,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5516,7 +5702,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5527,7 +5713,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5541,6 +5727,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5596,6 +5783,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5684,6 +5872,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5734,7 +5923,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5744,7 +5933,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5754,7 +5943,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5764,9 +5953,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5797,7 +5987,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5854,7 +6044,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5864,7 +6054,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5873,23 +6063,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5913,6 +6109,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #304562; border-radius: 3px; @@ -5933,9 +6130,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1f2d40; } + .p-badge { background: #81C784; color: #212529; @@ -5977,6 +6176,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #304562; color: rgba(255, 255, 255, 0.87); @@ -6012,6 +6212,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6026,6 +6227,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6041,6 +6243,7 @@ color: #212529; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6062,6 +6265,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6069,6 +6273,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #81C784; color: #212529; @@ -6101,6 +6306,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -6118,12 +6324,14 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #81C784; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #81C784; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #81C784; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #81C784; } diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css index 12463022a0d..dc654e9822d 100644 --- a/src/assets/components/themes/vela-orange/theme.css +++ b/src/assets/components/themes/vela-orange/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #ef9a9a; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-autocomplete-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -427,9 +440,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ef9a9a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -437,19 +452,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; border-color: #FFD54F; } + .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -476,7 +495,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -486,13 +505,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #FFD54F; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -664,10 +684,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #304562; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #304562; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -768,6 +794,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #ffc50c; color: #212529; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } @@ -831,12 +861,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #ffc50c; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #FFD54F; } @@ -875,9 +908,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ef9a9a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -885,22 +920,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1f2d40; border: 1px solid #304562; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #17212f; border: 1px solid #304562; @@ -944,6 +983,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1007,6 +1047,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #304562; } @@ -1019,9 +1060,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ef9a9a; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1034,60 +1083,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #304562; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1095,9 +1162,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1105,12 +1174,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1149,9 +1220,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #ffcd2e; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1184,45 +1257,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ef9a9a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #304562; } @@ -1232,14 +1317,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #304562; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1314,9 +1402,11 @@ box-shadow: 0 0 0 1px #ffe284; border-color: #FFD54F; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ef9a9a; } + .p-multiselect { background: #17212f; border: 1px solid #304562; @@ -1356,9 +1446,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1366,6 +1458,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1454,6 +1547,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #304562; } @@ -1463,12 +1557,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #304562; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ef9a9a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ef9a9a; } + .p-password-panel { padding: 1rem; background: #1f2d40; @@ -1490,6 +1587,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1497,6 +1595,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1504,6 +1603,7 @@ color: rgba(255, 255, 255, 0.6); right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1541,9 +1641,11 @@ background: #ffc50c; color: #212529; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #304562; } @@ -1556,9 +1658,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #ffc50c; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1589,6 +1693,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1f2d40; border: 1px solid #304562; @@ -1596,7 +1701,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1605,7 +1710,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1614,7 +1719,7 @@ color: #212529; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #212529; } .p-selectbutton .p-button.p-highlight:hover { @@ -1623,12 +1728,14 @@ color: #212529; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ef9a9a; } + .p-slider { background: #304562; border: 0 none; @@ -1680,6 +1787,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1f2d40; border: 1px solid #304562; @@ -1687,7 +1795,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1696,7 +1804,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1705,7 +1813,7 @@ color: #212529; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #212529; } .p-togglebutton.p-button.p-highlight:hover { @@ -1714,12 +1822,14 @@ color: #212529; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #212529; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ef9a9a; } + .p-treeselect { background: #17212f; border: 1px solid #304562; @@ -1756,12 +1866,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1821,6 +1934,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #304562; } @@ -1830,6 +1944,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #304562; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1837,6 +1952,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #212529; background: #FFD54F; @@ -1948,7 +2064,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1975,426 +2091,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909c; border: 1px solid #78909c; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #121212; background: #ffe082; border: 1px solid #ffe082; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; } + .p-button.p-button-link { color: #FFD54F; background: transparent; @@ -2418,6 +2542,7 @@ color: #FFD54F; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2429,14 +2554,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2447,45 +2575,52 @@ background: rgba(255, 255, 255, 0.6); color: #17212f; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2563,6 +2698,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #78909c; @@ -2591,6 +2727,7 @@ border-color: transparent; color: #78909c; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #81d4fa; @@ -2619,6 +2756,7 @@ border-color: transparent; color: #81d4fa; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2647,6 +2785,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2675,6 +2814,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2703,6 +2843,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f48fb1; @@ -2731,8 +2872,9 @@ border-color: transparent; color: #f48fb1; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2743,13 +2885,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -2775,6 +2917,7 @@ background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2868,9 +3011,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2880,17 +3023,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -2920,12 +3063,12 @@ background: #FFD54F; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1f2d40; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1f2d40; } .p-datatable .p-datatable-loading-icon { @@ -3028,6 +3171,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3066,10 +3210,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3097,6 +3243,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3116,6 +3263,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-column-filter-overlay { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3153,6 +3301,7 @@ border-top: 1px solid #304562; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3181,6 +3330,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3266,6 +3416,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3274,6 +3425,7 @@ background: #1f2d40; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3312,6 +3464,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-paginator { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3321,9 +3474,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3334,9 +3487,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3393,6 +3546,7 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3478,6 +3632,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3486,6 +3641,7 @@ background: #1f2d40; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #FFD54F; border-radius: 50%; @@ -3497,19 +3653,20 @@ background-color: #304562; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #304562; background: #1f2d40; @@ -3566,11 +3723,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3643,6 +3800,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3782,7 +3940,7 @@ background: #FFD54F; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1f2d40; } .p-treetable .p-treetable-loading-icon { @@ -3843,6 +4001,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3867,6 +4026,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #304562; @@ -3939,6 +4099,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3964,6 +4125,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1f2d40; } @@ -3987,6 +4149,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #304562; background: #1f2d40; @@ -4027,6 +4190,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #304562; padding: 1rem; @@ -4093,6 +4257,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; @@ -4103,6 +4268,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-splitter { border: 1px solid #304562; background: #1f2d40; @@ -4124,6 +4290,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #304562; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4192,6 +4359,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #1f2d40; border: 1px solid #304562; @@ -4202,6 +4370,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4249,6 +4418,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4321,6 +4491,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4362,6 +4533,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #304562; } + .p-sidebar { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4372,7 +4544,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4382,13 +4554,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; @@ -4402,6 +4574,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #304562; color: rgba(255, 255, 255, 0.87); @@ -4421,6 +4594,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #304562; } + .p-fileupload .p-fileupload-buttonbar { background: #1f2d40; padding: 1rem; @@ -4460,6 +4634,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #ffcd2e; color: #212529; @@ -4470,6 +4645,7 @@ color: #212529; border-color: #ffc50c; } + .p-breadcrumb { background: #1f2d40; border: 1px solid #304562; @@ -4501,6 +4677,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #1f2d40; @@ -4548,7 +4725,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4739,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4573,7 +4750,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4587,6 +4764,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4610,31 +4788,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4693,7 +4872,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4707,7 +4886,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4718,7 +4897,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4776,9 +4955,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #1f2d40; @@ -4815,7 +4995,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4829,7 +5009,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4840,7 +5020,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4874,6 +5054,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #1f2d40; @@ -4912,7 +5093,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4943,7 +5124,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4957,7 +5138,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4968,7 +5149,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4985,6 +5166,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5159,7 +5341,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5173,7 +5355,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5184,7 +5366,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5224,6 +5406,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #1f2d40; @@ -5266,7 +5449,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5280,7 +5463,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5291,7 +5474,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5338,6 +5521,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5382,6 +5566,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #304562; @@ -5452,6 +5637,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #ffe284; } + .p-tieredmenu { padding: 0.25rem 0; background: #1f2d40; @@ -5502,7 +5688,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5516,7 +5702,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5527,7 +5713,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5541,6 +5727,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5596,6 +5783,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5684,6 +5872,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5734,7 +5923,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5744,7 +5933,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5754,7 +5943,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5764,9 +5953,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5797,7 +5987,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5854,7 +6044,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5864,7 +6054,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5873,23 +6063,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5913,6 +6109,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #304562; border-radius: 3px; @@ -5933,9 +6130,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1f2d40; } + .p-badge { background: #FFD54F; color: #212529; @@ -5977,6 +6176,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #304562; color: rgba(255, 255, 255, 0.87); @@ -6012,6 +6212,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6026,6 +6227,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6041,6 +6243,7 @@ color: #212529; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6062,6 +6265,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6069,6 +6273,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #FFD54F; color: #212529; @@ -6101,6 +6306,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -6118,12 +6324,14 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #FFD54F; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #FFD54F; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #FFD54F; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #FFD54F; } diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css index aa63610b52b..b7503aa1723 100644 --- a/src/assets/components/themes/vela-purple/theme.css +++ b/src/assets/components/themes/vela-purple/theme.css @@ -276,32 +276,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.2s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #ef9a9a; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -313,12 +321,15 @@ outline-offset: 0; 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; @@ -335,6 +346,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.5rem; } @@ -381,6 +393,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-autocomplete-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -427,9 +440,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #ef9a9a; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2rem; } @@ -437,19 +452,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; border-color: #BA68C8; } + .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -476,7 +495,7 @@ border-top-left-radius: 3px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -486,13 +505,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -501,14 +520,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #BA68C8; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -657,6 +676,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2rem; } @@ -664,10 +684,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -710,6 +732,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -749,6 +772,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #304562; } @@ -758,9 +782,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #304562; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #ef9a9a; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.5rem; } @@ -768,6 +794,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -776,6 +803,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -816,9 +844,11 @@ background: #a241b2; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } @@ -831,12 +861,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #a241b2; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #BA68C8; } @@ -875,9 +908,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #ef9a9a; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.5rem; } @@ -885,22 +920,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #1f2d40; border: 1px solid #304562; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #17212f; border: 1px solid #304562; @@ -944,6 +983,7 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1007,6 +1047,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #304562; } @@ -1019,9 +1060,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #ef9a9a; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1034,60 +1083,78 @@ .p-inputgroup-addon:last-child { border-right: 1px solid #304562; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.357rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2rem; } @@ -1095,9 +1162,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2rem; } @@ -1105,12 +1174,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 2.857rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 2.857rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1149,9 +1220,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #b052c0; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1184,45 +1257,57 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-float-label > label { left: 0.5rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #ef9a9a; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2rem; } + .p-input-icon-left.p-float-label > label { left: 2rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #304562; } @@ -1232,14 +1317,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #304562; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-listbox { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1314,9 +1402,11 @@ box-shadow: 0 0 0 1px #cf95d9; border-color: #BA68C8; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #ef9a9a; } + .p-multiselect { background: #17212f; border: 1px solid #304562; @@ -1356,9 +1446,11 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.5rem; } @@ -1366,6 +1458,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-multiselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1454,6 +1547,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #304562; } @@ -1463,12 +1557,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #304562; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #ef9a9a; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #ef9a9a; } + .p-password-panel { padding: 1rem; background: #1f2d40; @@ -1490,6 +1587,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + p-password.p-password-clearable .p-password-input { padding-right: 2rem; } @@ -1497,6 +1595,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.5rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 3.5rem; } @@ -1504,6 +1603,7 @@ color: rgba(255, 255, 255, 0.6); right: 2rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1541,9 +1641,11 @@ background: #a241b2; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #304562; } @@ -1556,9 +1658,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #a241b2; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1589,6 +1693,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f48fb1; } + .p-selectbutton .p-button { background: #1f2d40; border: 1px solid #304562; @@ -1596,7 +1701,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1605,7 +1710,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1614,7 +1719,7 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover { @@ -1623,12 +1728,14 @@ color: #ffffff; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #ef9a9a; } + .p-slider { background: #304562; border: 0 none; @@ -1680,6 +1787,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.2s; } + .p-togglebutton.p-button { background: #1f2d40; border: 1px solid #304562; @@ -1687,7 +1795,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1696,7 +1804,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1705,7 +1813,7 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover { @@ -1714,12 +1822,14 @@ color: #ffffff; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #ffffff; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #ef9a9a; } + .p-treeselect { background: #17212f; border: 1px solid #304562; @@ -1756,12 +1866,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.5rem; } + .p-treeselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1821,6 +1934,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #304562; } @@ -1830,6 +1944,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #304562; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.5rem; } @@ -1837,6 +1952,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.357rem; } + .p-button { color: #ffffff; background: #BA68C8; @@ -1948,7 +2064,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -1975,426 +2091,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #78909c; border: 1px solid #78909c; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #121212; background: #ffe082; border: 1px solid #ffe082; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; } + .p-button.p-button-link { color: #BA68C8; background: transparent; @@ -2418,6 +2542,7 @@ color: #BA68C8; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2429,14 +2554,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2447,45 +2575,52 @@ background: rgba(255, 255, 255, 0.6); color: #17212f; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 3px; } @@ -2563,6 +2698,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #78909c; @@ -2591,6 +2727,7 @@ border-color: transparent; color: #78909c; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #81d4fa; @@ -2619,6 +2756,7 @@ border-color: transparent; color: #81d4fa; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #c5e1a5; @@ -2647,6 +2785,7 @@ border-color: transparent; color: #c5e1a5; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe082; @@ -2675,6 +2814,7 @@ border-color: transparent; color: #ffe082; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #ce93d8; @@ -2703,6 +2843,7 @@ border-color: transparent; color: #ce93d8; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #f48fb1; @@ -2731,8 +2872,9 @@ border-color: transparent; color: #f48fb1; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2743,13 +2885,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -2775,6 +2917,7 @@ background: rgba(186, 104, 200, 0.16); color: rgba(255, 255, 255, 0.87); } + .p-datatable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -2868,9 +3011,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2880,17 +3023,17 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -2920,12 +3063,12 @@ background: #BA68C8; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #1f2d40; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #1f2d40; } .p-datatable .p-datatable-loading-icon { @@ -3028,6 +3171,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3066,10 +3210,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3097,6 +3243,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3116,6 +3263,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-column-filter-overlay { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3153,6 +3301,7 @@ border-top: 1px solid #304562; margin: 0.25rem 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1rem; border-bottom: 0 none; @@ -3181,6 +3330,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3266,6 +3416,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3274,6 +3425,7 @@ background: #1f2d40; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.87); @@ -3312,6 +3464,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-paginator { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3321,9 +3474,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3334,9 +3487,9 @@ border-radius: 3px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(255, 255, 255, 0.03); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3393,6 +3546,7 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3478,6 +3632,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(255, 255, 255, 0.03); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3486,6 +3641,7 @@ background: #1f2d40; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #BA68C8; border-radius: 50%; @@ -3497,19 +3653,20 @@ background-color: #304562; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 1px solid #304562; background: #1f2d40; @@ -3566,11 +3723,11 @@ color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3643,6 +3800,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3782,7 +3940,7 @@ background: #BA68C8; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #1f2d40; } .p-treetable .p-treetable-loading-icon { @@ -3843,6 +4001,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -3867,6 +4026,7 @@ border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 1px solid #304562; @@ -3939,6 +4099,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-card { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -3964,6 +4125,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #1f2d40; } @@ -3987,6 +4149,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 1px solid #304562; background: #1f2d40; @@ -4027,6 +4190,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 1px solid #304562; padding: 1rem; @@ -4093,6 +4257,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; @@ -4103,6 +4268,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-splitter { border: 1px solid #304562; background: #1f2d40; @@ -4124,6 +4290,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #304562; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.357rem; } @@ -4192,6 +4359,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-toolbar { background: #1f2d40; border: 1px solid #304562; @@ -4202,6 +4370,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4249,6 +4418,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 3px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4321,6 +4491,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4362,6 +4533,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #304562; } + .p-sidebar { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -4372,7 +4544,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4382,13 +4554,13 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(255, 255, 255, 0.03); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; @@ -4402,6 +4574,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #304562; color: rgba(255, 255, 255, 0.87); @@ -4421,6 +4594,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #304562; } + .p-fileupload .p-fileupload-buttonbar { background: #1f2d40; padding: 1rem; @@ -4460,6 +4634,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #b052c0; color: #ffffff; @@ -4470,6 +4645,7 @@ color: #ffffff; border-color: #a241b2; } + .p-breadcrumb { background: #1f2d40; border: 1px solid #304562; @@ -4501,6 +4677,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.25rem 0; background: #1f2d40; @@ -4548,7 +4725,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4562,7 +4739,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4573,7 +4750,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4587,6 +4764,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4610,31 +4788,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4693,7 +4872,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4707,7 +4886,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4718,7 +4897,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4776,9 +4955,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.25rem 0; background: #1f2d40; @@ -4815,7 +4995,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4829,7 +5009,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4840,7 +5020,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4874,6 +5054,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #1f2d40; @@ -4912,7 +5093,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4943,7 +5124,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4957,7 +5138,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4968,7 +5149,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -4985,6 +5166,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5159,7 +5341,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5173,7 +5355,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5184,7 +5366,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5224,6 +5406,7 @@ border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } + .p-slidemenu { padding: 0.25rem 0; background: #1f2d40; @@ -5266,7 +5449,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5280,7 +5463,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5291,7 +5474,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5338,6 +5521,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.2s; @@ -5382,6 +5566,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #304562; @@ -5452,6 +5637,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #cf95d9; } + .p-tieredmenu { padding: 0.25rem 0; background: #1f2d40; @@ -5502,7 +5688,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5516,7 +5702,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5527,7 +5713,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5541,6 +5727,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.5rem; margin: 0; @@ -5596,6 +5783,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 3px; @@ -5684,6 +5872,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5734,7 +5923,7 @@ color: #044868; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #044868; } .p-toast .p-toast-message.p-toast-message-success { @@ -5744,7 +5933,7 @@ color: #224a23; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #224a23; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5754,7 +5943,7 @@ color: #6d5100; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #6d5100; } .p-toast .p-toast-message.p-toast-message-error { @@ -5764,9 +5953,10 @@ color: #73000c; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #73000c; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5797,7 +5987,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5854,7 +6044,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5864,7 +6054,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5873,23 +6063,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --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; @@ -5913,6 +6109,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #304562; border-radius: 3px; @@ -5933,9 +6130,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #1f2d40; } + .p-badge { background: #BA68C8; color: #ffffff; @@ -5977,6 +6176,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #304562; color: rgba(255, 255, 255, 0.87); @@ -6012,6 +6212,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.5rem; border-radius: 3px; @@ -6026,6 +6227,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6041,6 +6243,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6062,6 +6265,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 3px; @@ -6069,6 +6273,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #BA68C8; color: #ffffff; @@ -6101,6 +6306,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -6118,12 +6324,14 @@ .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #BA68C8; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #BA68C8; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { background: #BA68C8; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #BA68C8; } diff --git a/src/assets/components/themes/viva-dark/theme.css b/src/assets/components/themes/viva-dark/theme.css index b3f8241706d..d158f24fac4 100644 --- a/src/assets/components/themes/viva-dark/theme.css +++ b/src/assets/components/themes/viva-dark/theme.css @@ -53,28 +53,32 @@ font-family: "Poppins"; font-style: normal; font-weight: 300; - src: local(""), url("./fonts/poppins-v15-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-300.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-regular - latin-ext_latin */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; - src: local(""), url("./fonts/poppins-v15-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-600 - latin-ext_latin */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; - src: local(""), url("./fonts/poppins-v15-latin-ext_latin-600.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-600.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-600.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-700 - latin-ext_latin */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; - src: local(""), url("./fonts/poppins-v15-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f6fbfd; @@ -302,32 +306,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.3s; } + .p-disabled, .p-component:disabled { opacity: 0.4; } + .p-error { color: #f78c79; } + .p-text-secondary { color: rgba(255, 255, 255, 0.6); } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -339,12 +351,15 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .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; @@ -361,6 +376,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -407,6 +423,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f78c79; } + .p-autocomplete-panel { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -453,9 +470,11 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f78c79; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -463,19 +482,23 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.607rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f78c79; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; border-color: #9eade6; } + .p-datepicker { padding: 0.5rem; background: #161d21; @@ -502,7 +525,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -512,13 +535,13 @@ transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(158, 173, 230, 0.08); } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; @@ -527,14 +550,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: rgba(255, 255, 255, 0.87); transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #9eade6; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -683,6 +706,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -690,10 +714,12 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: rgba(255, 255, 255, 0.6); right: 3.607rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -736,6 +762,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f78c79; } + .p-cascadeselect-panel { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -775,6 +802,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #263238; } @@ -784,9 +812,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #263238; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f78c79; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -794,6 +824,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -802,6 +833,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -842,9 +874,11 @@ background: #7f93de; color: #121212; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f78c79; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #263238; } @@ -857,12 +891,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #7f93de; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f78c79; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #2d3e44; } @@ -901,9 +938,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f78c79; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -911,22 +950,26 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #161d21; border: 1px solid #263238; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: rgba(255, 255, 255, 0.87); } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #0e1315; border: 2px solid #263238; @@ -970,6 +1013,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f78c79; } + .p-dropdown-panel { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -1033,6 +1077,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-dropdown { background: #263238; } @@ -1045,9 +1090,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f78c79; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #161d21; color: rgba(255, 255, 255, 0.6); @@ -1060,60 +1113,78 @@ .p-inputgroup-addon:last-child { border-right: 2px solid #263238; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.857rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f78c79; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1121,9 +1192,11 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f78c79; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1131,12 +1204,14 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.607rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.607rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1175,9 +1250,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #8fa0e2; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f78c79; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1210,45 +1287,57 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: rgba(255, 255, 255, 0.6); transition-duration: 0.3s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f78c79; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } + :-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + ::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } + :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } + .p-input-filled .p-inputtext { background-color: #263238; } @@ -1258,14 +1347,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #263238; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -1340,9 +1432,11 @@ box-shadow: 0 0 0 1px #9eade6; border-color: #9eade6; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f78c79; } + .p-multiselect { background: #0e1315; border: 2px solid #263238; @@ -1382,9 +1476,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1392,6 +1488,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + .p-multiselect-panel { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -1480,6 +1577,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-multiselect { background: #263238; } @@ -1489,12 +1587,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #263238; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f78c79; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f78c79; } + .p-password-panel { padding: 1rem; background: #161d21; @@ -1516,6 +1617,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #cede9c; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1523,6 +1625,7 @@ color: rgba(255, 255, 255, 0.6); right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1530,6 +1633,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1567,9 +1671,11 @@ background: #7f93de; color: #121212; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f78c79; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #263238; } @@ -1582,9 +1688,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #7f93de; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1615,6 +1723,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f88c79; } + .p-selectbutton .p-button { background: #161d21; border: 2px solid #263238; @@ -1622,7 +1731,7 @@ transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1631,7 +1740,7 @@ color: rgba(255, 255, 255, 0.87); } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-selectbutton .p-button.p-highlight { @@ -1640,7 +1749,7 @@ color: #9eade6; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #9eade6; } .p-selectbutton .p-button.p-highlight:hover { @@ -1649,12 +1758,14 @@ color: #9eade6; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #9eade6; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f78c79; } + .p-slider { background: #263238; border: 0 none; @@ -1706,6 +1817,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.3s; } + .p-togglebutton.p-button { background: #161d21; border: 2px solid #263238; @@ -1713,7 +1825,7 @@ transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1722,7 +1834,7 @@ color: rgba(255, 255, 255, 0.87); } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } .p-togglebutton.p-button.p-highlight { @@ -1731,7 +1843,7 @@ color: #9eade6; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #9eade6; } .p-togglebutton.p-button.p-highlight:hover { @@ -1740,12 +1852,14 @@ color: #9eade6; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #9eade6; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f78c79; } + .p-treeselect { background: #0e1315; border: 2px solid #263238; @@ -1782,12 +1896,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f78c79; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.75rem; } + .p-treeselect-panel { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -1847,6 +1964,7 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-input-filled .p-treeselect { background: #263238; } @@ -1856,6 +1974,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #263238; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1863,6 +1982,7 @@ color: rgba(255, 255, 255, 0.6); right: 2.857rem; } + .p-button { color: #121212; background: #9eade6; @@ -1974,7 +2094,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -2001,426 +2121,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.857rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #0e1315; background: #b4bfcd; border: 1px solid #b4bfcd; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #9dabbe; color: #0e1315; border-color: #9dabbe; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 1px #e1e5eb; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #8698ae; color: #0e1315; border-color: #8698ae; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #b4bfcd; border: 2px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(180, 191, 205, 0.04); color: #b4bfcd; border: 2px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(180, 191, 205, 0.16); color: #b4bfcd; border: 2px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #b4bfcd; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(180, 191, 205, 0.04); border-color: transparent; color: #b4bfcd; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(180, 191, 205, 0.16); border-color: transparent; color: #b4bfcd; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #35a4cc; border: 1px solid #35a4cc; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #2f94b9; color: #ffffff; border-color: #2f94b9; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #aedbeb; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #2984a4; color: #ffffff; border-color: #2984a4; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #35a4cc; border: 2px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(53, 164, 204, 0.04); color: #35a4cc; border: 2px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(53, 164, 204, 0.16); color: #35a4cc; border: 2px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #35a4cc; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(53, 164, 204, 0.04); border-color: transparent; color: #35a4cc; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(53, 164, 204, 0.16); border-color: transparent; color: #35a4cc; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #0e1315; background: #cede9c; border: 1px solid #cede9c; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #c0d580; color: #0e1315; border-color: #c0d580; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #ebf2d7; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #b2cb63; color: #0e1315; border-color: #b2cb63; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #cede9c; border: 2px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(206, 222, 156, 0.04); color: #cede9c; border: 2px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(206, 222, 156, 0.16); color: #cede9c; border: 2px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #cede9c; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(206, 222, 156, 0.04); border-color: transparent; color: #cede9c; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(206, 222, 156, 0.16); border-color: transparent; color: #cede9c; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #0e1315; background: #ffe08a; border: 1px solid #ffe08a; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ffd663; color: #0e1315; border-color: #ffd663; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #fff3d0; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ffcb3b; color: #0e1315; border-color: #ffcb3b; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ffe08a; border: 2px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 138, 0.04); color: #ffe08a; border: 2px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 138, 0.16); color: #ffe08a; border: 2px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ffe08a; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 224, 138, 0.04); border-color: transparent; color: #ffe08a; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 224, 138, 0.16); border-color: transparent; color: #ffe08a; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #0e1315; background: #b09ce5; border: 1px solid #b09ce5; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #987edd; color: #0e1315; border-color: #987edd; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #dfd7f5; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #7f5fd5; color: #0e1315; border-color: #7f5fd5; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #b09ce5; border: 2px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(176, 156, 229, 0.04); color: #b09ce5; border: 2px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(176, 156, 229, 0.16); color: #b09ce5; border: 2px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #b09ce5; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(176, 156, 229, 0.04); border-color: transparent; color: #b09ce5; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(176, 156, 229, 0.16); border-color: transparent; color: #b09ce5; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #0e1315; background: #e693a9; border: 1px solid #e693a9; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #df7491; color: #0e1315; border-color: #df7491; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 1px #f5d4dd; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #d85678; color: #0e1315; border-color: #d85678; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #e693a9; border: 2px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(230, 147, 169, 0.04); color: #e693a9; border: 2px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(230, 147, 169, 0.16); color: #e693a9; border: 2px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #e693a9; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(230, 147, 169, 0.04); border-color: transparent; color: #e693a9; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(230, 147, 169, 0.16); border-color: transparent; color: #e693a9; } + .p-button.p-button-link { color: #7f93de; background: transparent; @@ -2444,6 +2572,7 @@ color: #7f93de; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2455,14 +2584,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2473,45 +2605,52 @@ background: #263238; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2589,6 +2728,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #b4bfcd; @@ -2617,6 +2757,7 @@ border-color: transparent; color: #b4bfcd; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #35a4cc; @@ -2645,6 +2786,7 @@ border-color: transparent; color: #35a4cc; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #cede9c; @@ -2673,6 +2815,7 @@ border-color: transparent; color: #cede9c; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ffe08a; @@ -2701,6 +2844,7 @@ border-color: transparent; color: #ffe08a; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #b09ce5; @@ -2729,6 +2873,7 @@ border-color: transparent; color: #b09ce5; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #e693a9; @@ -2757,8 +2902,9 @@ border-color: transparent; color: #e693a9; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2769,13 +2915,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(158, 173, 230, 0.08); } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; @@ -2801,6 +2947,7 @@ background: rgba(158, 173, 230, 0.16); color: #9eade6; } + .p-datatable .p-paginator-top { border-width: 0 0 2px 0; border-radius: 0; @@ -2894,9 +3041,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -2906,17 +3053,17 @@ transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(158, 173, 230, 0.08); } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; @@ -2946,12 +3093,12 @@ background: #9eade6; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #161d21; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #161d21; } .p-datatable .p-datatable-loading-icon { @@ -3054,6 +3201,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 2px 0; border-radius: 0; @@ -3092,10 +3240,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3123,6 +3273,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3142,6 +3293,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-column-filter-overlay { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -3179,6 +3331,7 @@ border-top: 1px solid #263238; margin: 4px 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1.5rem; border-bottom: 0 none; @@ -3207,6 +3360,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3292,6 +3446,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: rgba(158, 173, 230, 0.08); } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3300,6 +3455,7 @@ background: #161d21; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: rgba(158, 173, 230, 0.08); color: rgba(255, 255, 255, 0.87); @@ -3338,6 +3494,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-paginator { background: #161d21; color: rgba(255, 255, 255, 0.6); @@ -3347,9 +3504,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: rgba(255, 255, 255, 0.6); @@ -3360,9 +3517,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: rgba(158, 173, 230, 0.08); border-color: transparent; color: rgba(255, 255, 255, 0.87); @@ -3419,6 +3576,7 @@ border-color: transparent; color: rgba(255, 255, 255, 0.87); } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3504,6 +3662,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: rgba(158, 173, 230, 0.08); } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3512,6 +3671,7 @@ background: #161d21; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #9eade6; border-radius: 50%; @@ -3523,19 +3683,20 @@ background-color: #263238; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 2px solid #263238; background: #161d21; @@ -3592,11 +3753,11 @@ color: #9eade6; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #9eade6; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #9eade6; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3669,6 +3830,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-treetable .p-paginator-top { border-width: 0 0 2px 0; border-radius: 0; @@ -3808,7 +3970,7 @@ background: #9eade6; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #161d21; } .p-treetable .p-treetable-loading-icon { @@ -3869,6 +4031,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #161d21; color: rgba(255, 255, 255, 0.6); @@ -3893,6 +4056,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 2px solid #263238; @@ -3965,6 +4129,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-card { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -3990,6 +4155,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #161d21; } @@ -4013,6 +4179,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 2px solid #263238; background: #161d21; @@ -4053,6 +4220,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 2px solid #263238; padding: 1rem; @@ -4119,6 +4287,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #263238; border: 0 none; @@ -4129,6 +4298,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-splitter { border: 2px solid #263238; background: #161d21; @@ -4150,6 +4320,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #263238; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.857rem; } @@ -4218,6 +4389,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #161d21; border: 2px solid #263238; @@ -4228,6 +4400,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -4275,6 +4448,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4347,6 +4521,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -4388,6 +4563,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #263238; } + .p-sidebar { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -4398,7 +4574,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -4408,13 +4584,13 @@ transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: rgba(255, 255, 255, 0.87); border-color: transparent; background: rgba(158, 173, 230, 0.08); } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; @@ -4428,6 +4604,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #263238; color: rgba(255, 255, 255, 0.87); @@ -4447,6 +4624,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #263238; } + .p-fileupload .p-fileupload-buttonbar { background: #161d21; padding: 1rem; @@ -4486,6 +4664,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #8fa0e2; color: #121212; @@ -4496,6 +4675,7 @@ color: #121212; border-color: #7f93de; } + .p-breadcrumb { background: #161d21; border: 2px solid #263238; @@ -4527,6 +4707,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: rgba(255, 255, 255, 0.6); } + .p-contextmenu { padding: 0.5rem 0.5rem; background: #161d21; @@ -4574,7 +4755,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4588,7 +4769,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4599,7 +4780,7 @@ color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-contextmenu .p-menuitem-separator { @@ -4613,6 +4794,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4636,31 +4818,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4719,7 +4902,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4733,7 +4916,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4744,7 +4927,7 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-megamenu .p-megamenu-panel { @@ -4802,9 +4985,10 @@ color: rgba(255, 255, 255, 0.87); } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } + .p-menu { padding: 0.5rem 0.5rem; background: #161d21; @@ -4841,7 +5025,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4855,7 +5039,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4866,7 +5050,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menu.p-menu-overlay { @@ -4900,6 +5084,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #161d21; @@ -4938,7 +5123,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4969,7 +5154,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4983,7 +5168,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4994,7 +5179,7 @@ color: rgba(255, 255, 255, 0.87); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-menubar .p-submenu-list { @@ -5011,6 +5196,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5185,7 +5371,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5199,7 +5385,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5210,7 +5396,7 @@ color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5250,6 +5436,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-slidemenu { padding: 0.5rem 0.5rem; background: #161d21; @@ -5292,7 +5479,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5306,7 +5493,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5317,7 +5504,7 @@ color: rgba(255, 255, 255, 0.87); } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-slidemenu.p-slidemenu-overlay { @@ -5364,6 +5551,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.3s; @@ -5408,6 +5596,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: transparent; border: 1px solid #263238; @@ -5478,6 +5667,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #9eade6; } + .p-tieredmenu { padding: 0.5rem 0.5rem; background: #161d21; @@ -5528,7 +5718,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5542,7 +5732,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5553,7 +5743,7 @@ color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: rgba(255, 255, 255, 0.87); } .p-tieredmenu .p-menuitem-separator { @@ -5567,6 +5757,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5622,6 +5813,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5710,6 +5902,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5760,7 +5953,7 @@ color: #0e1315; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #0e1315; } .p-toast .p-toast-message.p-toast-message-success { @@ -5770,7 +5963,7 @@ color: #0e1315; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #0e1315; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5780,7 +5973,7 @@ color: #0e1315; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #0e1315; } .p-toast .p-toast-message.p-toast-message-error { @@ -5790,9 +5983,10 @@ color: #0e1315; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #0e1315; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5823,7 +6017,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5880,7 +6074,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f8f9fa; @@ -5890,7 +6084,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f8f9fa; } @@ -5899,23 +6093,29 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } + .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; @@ -5939,6 +6139,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #263238; border-radius: 6px; @@ -5959,9 +6160,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #161d21; } + .p-badge { background: #9eade6; color: #121212; @@ -6003,6 +6206,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #263238; color: rgba(255, 255, 255, 0.87); @@ -6038,6 +6242,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -6052,6 +6257,7 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6067,6 +6273,7 @@ color: #121212; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6088,6 +6295,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; @@ -6095,6 +6303,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); } + .p-tag { background: #9eade6; color: #121212; @@ -6127,6 +6336,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #161d21; color: rgba(255, 255, 255, 0.87); @@ -6145,16 +6355,20 @@ .p-button .p-button-label { font-weight: 600; } - .p-button-group .p-button-label, - .p-togglebutton .p-button-label { + + .p-buttonset .p-button-label, +.p-togglebutton .p-button-label { font-weight: 400; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #9eade6; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #9eade6; } + .p-panel { border: 2px solid #263238; border-radius: 6px; @@ -6165,9 +6379,11 @@ .p-panel .p-panel-content { border: 0 none; } + .p-fieldset .p-fieldset-legend { border-color: transparent; } + .p-accordion .p-accordion-toggle-icon { order: 10; margin-left: auto; @@ -6185,6 +6401,7 @@ .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { border-bottom: 0 none; } + .p-inline-message.p-inline-message-info { border-color: #a3d7e6; } @@ -6197,30 +6414,39 @@ .p-inline-message.p-inline-message-error { border-color: #e6a3b2; } + .p-inputtext:enabled:focus { box-shadow: none; } + .p-dropdown:not(.p-disabled).p-focus { box-shadow: none; } + .p-multiselect:not(.p-disabled).p-focus { box-shadow: none; } + .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: none; } + .p-autocomplete.p-autocomplete-multiple:not(.p-disabled).p-focus { box-shadow: none; } + .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: none; } + .p-orderlist .p-orderlist-list { border-top: 0 none; } + .p-picklist .p-picklist-list { border-top: 0 none; } + .p-panelmenu .p-panelmenu-icon.pi-chevron-right, .p-panelmenu .p-panelmenu-icon.pi-chevron-down { order: 10; margin-left: auto; @@ -6239,6 +6465,7 @@ padding-bottom: calc(1rem + 2px); border-bottom: 0 none; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #9eade6; } diff --git a/src/assets/components/themes/viva-light/theme.css b/src/assets/components/themes/viva-light/theme.css index 38e885c82a1..05efd14ab13 100644 --- a/src/assets/components/themes/viva-light/theme.css +++ b/src/assets/components/themes/viva-light/theme.css @@ -54,28 +54,32 @@ font-family: "Poppins"; font-style: normal; font-weight: 300; - src: local(""), url("./fonts/poppins-v15-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-300.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-300.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-regular - latin-ext_latin */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; - src: local(""), url("./fonts/poppins-v15-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-600 - latin-ext_latin */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; - src: local(""), url("./fonts/poppins-v15-latin-ext_latin-600.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-600.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-600.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* poppins-700 - latin-ext_latin */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; - src: local(""), url("./fonts/poppins-v15-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ + src: local(""), url("./fonts/poppins-v15-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/poppins-v15-latin-ext_latin-700.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } :root { --blue-50:#f6fbfd; @@ -303,32 +307,40 @@ * { box-sizing: border-box; } + .p-component { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); font-size: 1rem; font-weight: normal; } + .p-component-overlay { background-color: rgba(0, 0, 0, 0.4); transition-duration: 0.3s; } + .p-disabled, .p-component:disabled { opacity: 0.6; } + .p-error { color: #f88c79; } + .p-text-secondary { color: #898989; } + .pi { font-size: 1rem; } + .p-icon { width: 1rem; height: 1rem; } + .p-link { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -340,12 +352,15 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .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; @@ -362,6 +377,7 @@ background-color: transparent; } } + .p-autocomplete .p-autocomplete-loader { right: 0.75rem; } @@ -408,6 +424,7 @@ .p-autocomplete.p-invalid.p-component > .p-inputtext { border-color: #f88c79; } + .p-autocomplete-panel { background: #ffffff; color: #6c6c6c; @@ -454,9 +471,11 @@ color: #6c6c6c; background: transparent; } + p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext { border-color: #f88c79; } + p-autocomplete.p-autocomplete-clearable .p-inputtext { padding-right: 2.5rem; } @@ -464,19 +483,23 @@ color: #898989; right: 0.75rem; } + p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd .p-autocomplete-clear-icon { color: #898989; right: 3.607rem; } + p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext { border-color: #f88c79; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; border-color: #91a4e3; } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -503,7 +526,7 @@ border-top-left-radius: 6px; } .p-datepicker .p-datepicker-header .p-datepicker-prev, - .p-datepicker .p-datepicker-header .p-datepicker-next { +.p-datepicker .p-datepicker-header .p-datepicker-next { width: 2rem; height: 2rem; color: #898989; @@ -513,13 +536,13 @@ transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover { color: #6c6c6c; border-color: transparent; background: #edf0fa; } .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible, - .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { +.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; @@ -528,14 +551,14 @@ line-height: 2rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { color: #6c6c6c; transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; font-weight: 600; padding: 0.5rem; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, - .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { +.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { color: #5472d4; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { @@ -684,6 +707,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + p-calendar.p-calendar-clearable .p-inputtext { padding-right: 2.5rem; } @@ -691,10 +715,12 @@ color: #898989; right: 0.75rem; } + p-calendar.p-calendar-clearable .p-calendar-w-btn .p-calendar-clear-icon { color: #898989; right: 3.607rem; } + @media screen and (max-width: 769px) { .p-datepicker table th, .p-datepicker table td { padding: 0; @@ -737,6 +763,7 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f88c79; } + .p-cascadeselect-panel { background: #ffffff; color: #6c6c6c; @@ -776,6 +803,7 @@ .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } + .p-input-filled .p-cascadeselect { background: #f2f2f2; } @@ -785,9 +813,11 @@ .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { background-color: #f2f2f2; } + p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect { border-color: #f88c79; } + p-cascadeselect.p-cascadeselect-clearable .p-cascadeselect-label { padding-right: 0.75rem; } @@ -795,6 +825,7 @@ color: #898989; right: 2.857rem; } + .p-overlay-modal .p-cascadeselect-sublist .p-cascadeselect-panel { box-shadow: none; border-radius: 0; @@ -803,6 +834,7 @@ .p-overlay-modal .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon { transform: rotate(90deg); } + .p-checkbox { width: 20px; height: 20px; @@ -843,9 +875,11 @@ background: #3c5ece; color: #ffffff; } + p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f88c79; } + .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f2f2f2; } @@ -858,12 +892,15 @@ .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { background: #3c5ece; } + .p-checkbox-label { margin-left: 0.5rem; } + p-tristatecheckbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f88c79; } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #cecece; } @@ -902,9 +939,11 @@ padding: 0; margin: 0; } + p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: #f88c79; } + p-chips.p-chips-clearable .p-inputtext { padding-right: 1.75rem; } @@ -912,22 +951,26 @@ color: #898989; right: 0.75rem; } + .p-colorpicker-preview, - .p-fluid .p-colorpicker-preview.p-inputtext { +.p-fluid .p-colorpicker-preview.p-inputtext { width: 2rem; height: 2rem; } + .p-colorpicker-panel { background: #585858; border: 1px solid #585858; } .p-colorpicker-panel .p-colorpicker-color-handle, - .p-colorpicker-panel .p-colorpicker-hue-handle { +.p-colorpicker-panel .p-colorpicker-hue-handle { border-color: #ffffff; } + .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { background: #ffffff; border: 2px solid #e1e1e1; @@ -971,6 +1014,7 @@ .p-dropdown.p-invalid.p-component { border-color: #f88c79; } + .p-dropdown-panel { background: #ffffff; color: #6c6c6c; @@ -1034,6 +1078,7 @@ color: #6c6c6c; background: transparent; } + .p-input-filled .p-dropdown { background: #f2f2f2; } @@ -1046,9 +1091,17 @@ .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { border-color: #f88c79; } + + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f5f5f5; color: #898989; @@ -1061,60 +1114,78 @@ .p-inputgroup-addon:last-child { border-right: 2px solid #e1e1e1; } + .p-inputgroup > .p-component, - .p-inputgroup > .p-inputwrapper > .p-inputtext, - .p-inputgroup > .p-float-label > .p-component { +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { border-radius: 0; margin: 0; } .p-inputgroup > .p-component + .p-inputgroup-addon, - .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, - .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { border-left: 0 none; } .p-inputgroup > .p-component:focus, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus, - .p-inputgroup > .p-float-label > .p-component:focus { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { z-index: 1; } .p-inputgroup > .p-component:focus ~ label, - .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, - .p-inputgroup > .p-float-label > .p-component:focus ~ label { +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label, +.p-inputgroup > .p-float-label > .p-component:focus ~ label { z-index: 1; } + .p-inputgroup-addon:first-child, - .p-inputgroup button:first-child, - .p-inputgroup input:first-child, - .p-inputgroup > .p-inputwrapper:first-child > .p-component, - .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-component, +.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup .p-float-label:first-child input { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } + .p-inputgroup-addon:last-child, - .p-inputgroup button:last-child, - .p-inputgroup input:last-child, - .p-inputgroup > .p-inputwrapper:last-child > .p-component, - .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-component, +.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputgroup .p-float-label:last-child input { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-fluid .p-inputgroup .p-button { width: auto; } .p-fluid .p-inputgroup .p-button.p-button-icon-only { width: 2.857rem; } + + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #898989; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #898989; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f88c79; } + p-inputmask.p-inputmask-clearable .p-inputtext { padding-right: 2.5rem; } @@ -1122,9 +1193,11 @@ color: #898989; right: 0.75rem; } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f88c79; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-input { padding-right: 2.5rem; } @@ -1132,12 +1205,14 @@ color: #898989; right: 0.75rem; } + p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-stacked .p-inputnumber-clear-icon { right: 3.607rem; } p-inputnumber.p-inputnumber-clearable .p-inputnumber-buttons-horizontal .p-inputnumber-clear-icon { right: 3.607rem; } + .p-inputswitch { width: 3rem; height: 1.75rem; @@ -1176,9 +1251,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #4868d1; } + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f88c79; } + .p-inputtext { font-family: var(--font-family); font-feature-settings: var(--font-feature-settings, normal); @@ -1211,45 +1288,57 @@ font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-float-label > label { left: 0.75rem; color: #898989; transition-duration: 0.3s; } + .p-float-label > .ng-invalid.ng-dirty + label { color: #f88c79; } + .p-input-icon-left > .p-icon-wrapper.p-icon, - .p-input-icon-left > i:first-of-type { +.p-input-icon-left > i:first-of-type { left: 0.75rem; color: #898989; } + .p-input-icon-left > .p-inputtext { padding-left: 2.5rem; } + .p-input-icon-left.p-float-label > label { left: 2.5rem; } + .p-input-icon-right > .p-icon-wrapper, - .p-input-icon-right > i:last-of-type { +.p-input-icon-right > i:last-of-type { right: 0.75rem; color: #898989; } + .p-input-icon-right > .p-inputtext { padding-right: 2.5rem; } + ::-webkit-input-placeholder { color: #898989; } + :-moz-placeholder { color: #898989; } + ::-moz-placeholder { color: #898989; } + :-ms-input-placeholder { color: #898989; } + .p-input-filled .p-inputtext { background-color: #f2f2f2; } @@ -1259,14 +1348,17 @@ .p-input-filled .p-inputtext:enabled:focus { background-color: #f2f2f2; } + .p-inputtext-sm .p-inputtext { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; } + .p-inputtext-lg .p-inputtext { font-size: 1.25rem; padding: 0.625rem 0.9375rem; } + .p-listbox { background: #ffffff; color: #6c6c6c; @@ -1341,9 +1433,11 @@ box-shadow: 0 0 0 0.1rem #bbc7ee; border-color: #91a4e3; } + p-listbox.ng-dirty.ng-invalid > .p-listbox { border-color: #f88c79; } + .p-multiselect { background: #ffffff; border: 2px solid #e1e1e1; @@ -1383,9 +1477,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; } + .p-multiselect-clearable .p-multiselect-label-container { padding-right: 1.75rem; } @@ -1393,6 +1489,7 @@ color: #898989; right: 2.857rem; } + .p-multiselect-panel { background: #ffffff; color: #6c6c6c; @@ -1481,6 +1578,7 @@ color: #6c6c6c; background: transparent; } + .p-input-filled .p-multiselect { background: #f2f2f2; } @@ -1490,12 +1588,15 @@ .p-input-filled .p-multiselect:not(.p-disabled).p-focus { background-color: #f2f2f2; } + p-multiselect.ng-dirty.ng-invalid > .p-multiselect { border-color: #f88c79; } + p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext { border-color: #f88c79; } + .p-password-panel { padding: 1rem; background: #ffffff; @@ -1517,6 +1618,7 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #8bae2c; } + p-password.p-password-clearable .p-password-input { padding-right: 2.5rem; } @@ -1524,6 +1626,7 @@ color: #898989; right: 0.75rem; } + p-password.p-password-clearable.p-password-mask .p-password-input { padding-right: 4.25rem; } @@ -1531,6 +1634,7 @@ color: #898989; right: 2.5rem; } + .p-radiobutton { width: 20px; height: 20px; @@ -1568,9 +1672,11 @@ background: #3c5ece; color: #ffffff; } + p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f88c79; } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f2f2f2; } @@ -1583,9 +1689,11 @@ .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { background: #3c5ece; } + .p-radiobutton-label { margin-left: 0.5rem; } + .p-rating { gap: 0.5rem; } @@ -1616,6 +1724,7 @@ .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #f88c79; } + .p-selectbutton .p-button { background: #ffffff; border: 2px solid #e1e1e1; @@ -1623,7 +1732,7 @@ transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; } .p-selectbutton .p-button .p-button-icon-left, - .p-selectbutton .p-button .p-button-icon-right { +.p-selectbutton .p-button .p-button-icon-right { color: #898989; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1632,7 +1741,7 @@ color: #6c6c6c; } .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #898989; } .p-selectbutton .p-button.p-highlight { @@ -1641,7 +1750,7 @@ color: #585858; } .p-selectbutton .p-button.p-highlight .p-button-icon-left, - .p-selectbutton .p-button.p-highlight .p-button-icon-right { +.p-selectbutton .p-button.p-highlight .p-button-icon-right { color: #585858; } .p-selectbutton .p-button.p-highlight:hover { @@ -1650,12 +1759,14 @@ color: #585858; } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, - .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { +.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { color: #585858; } + p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button { border-color: #f88c79; } + .p-slider { background: #ebebeb; border: 0 none; @@ -1707,6 +1818,7 @@ .p-slider.p-slider-animate.p-slider-vertical .p-slider-range { transition: height 0.3s; } + .p-togglebutton.p-button { background: #ffffff; border: 2px solid #e1e1e1; @@ -1714,7 +1826,7 @@ transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; } .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { +.p-togglebutton.p-button .p-button-icon-right { color: #898989; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { @@ -1723,7 +1835,7 @@ color: #6c6c6c; } .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { +.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { color: #898989; } .p-togglebutton.p-button.p-highlight { @@ -1732,7 +1844,7 @@ color: #585858; } .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { +.p-togglebutton.p-button.p-highlight .p-button-icon-right { color: #585858; } .p-togglebutton.p-button.p-highlight:hover { @@ -1741,12 +1853,14 @@ color: #585858; } .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { +.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { color: #585858; } + p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button { border-color: #f88c79; } + .p-treeselect { background: #ffffff; border: 2px solid #e1e1e1; @@ -1783,12 +1897,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f88c79; } + .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { padding: 0.25rem 0.75rem; } + .p-treeselect-panel { background: #ffffff; color: #6c6c6c; @@ -1848,6 +1965,7 @@ color: #6c6c6c; background: transparent; } + .p-input-filled .p-treeselect { background: #f2f2f2; } @@ -1857,6 +1975,7 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #f2f2f2; } + p-treeselect.p-treeselect-clearable .p-treeselect-label-container { padding-right: 1.75rem; } @@ -1864,6 +1983,7 @@ color: #898989; right: 2.857rem; } + .p-button { color: #ffffff; background: #5472d4; @@ -1975,7 +2095,7 @@ padding: 0.5rem 0; } .p-button.p-button-icon-only .p-button-icon-left, - .p-button.p-button-icon-only .p-button-icon-right { +.p-button.p-button-icon-only .p-button-icon-right { margin: 0; } .p-button.p-button-icon-only.p-button-rounded { @@ -2002,426 +2122,434 @@ .p-button.p-button-loading-label-only .p-button-loading-icon { margin-right: 0; } + .p-fluid .p-button { width: 100%; } - .p-fluid .p-button-group .p-button-icon-only { + .p-fluid .p-button-icon-only { width: 2.857rem; } - .p-fluid .p-button-group { + .p-fluid .p-buttonset { display: flex; } - .p-fluid .p-button-group .p-button { + .p-fluid .p-buttonset .p-button { flex: 1; } + .p-button.p-button-secondary, - .p-button-group.p-button-secondary > .p-button, - .p-splitbutton.p-button-secondary > .p-button { +.p-buttonset.p-button-secondary > .p-button, +.p-splitbutton.p-button-secondary > .p-button { color: #ffffff; background: #8191a6; border: 1px solid #8191a6; } .p-button.p-button-secondary:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover { background: #70829a; color: #ffffff; border-color: #70829a; } .p-button.p-button-secondary:not(:disabled):focus, - .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #cdd3db; } .p-button.p-button-secondary:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button:not(:disabled):active { background: #62738a; color: #ffffff; border-color: #62738a; } .p-button.p-button-secondary.p-button-outlined, - .p-button-group.p-button-secondary > .p-button.p-button-outlined, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined { background-color: transparent; color: #8191a6; border: 2px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(129, 145, 166, 0.04); color: #8191a6; border: 2px solid; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active { background: rgba(129, 145, 166, 0.16); color: #8191a6; border: 2px solid; } .p-button.p-button-secondary.p-button-text, - .p-button-group.p-button-secondary > .p-button.p-button-text, - .p-splitbutton.p-button-secondary > .p-button.p-button-text { +.p-buttonset.p-button-secondary > .p-button.p-button-text, +.p-splitbutton.p-button-secondary > .p-button.p-button-text { background-color: transparent; color: #8191a6; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover { background: rgba(129, 145, 166, 0.04); border-color: transparent; color: #8191a6; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, - .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active { background: rgba(129, 145, 166, 0.16); border-color: transparent; color: #8191a6; } + .p-button.p-button-info, - .p-button-group.p-button-info > .p-button, - .p-splitbutton.p-button-info > .p-button { +.p-buttonset.p-button-info > .p-button, +.p-splitbutton.p-button-info > .p-button { color: #ffffff; background: #35a4cc; border: 1px solid #35a4cc; } .p-button.p-button-info:not(:disabled):hover, - .p-button-group.p-button-info > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button:not(:disabled):hover { background: #2f94b9; color: #ffffff; border-color: #2f94b9; } .p-button.p-button-info:not(:disabled):focus, - .p-button-group.p-button-info > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-info > .p-button:not(:disabled):focus { +.p-buttonset.p-button-info > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-info > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #aedbeb; } .p-button.p-button-info:not(:disabled):active, - .p-button-group.p-button-info > .p-button:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button:not(:disabled):active { +.p-buttonset.p-button-info > .p-button:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button:not(:disabled):active { background: #2984a4; color: #ffffff; border-color: #2984a4; } .p-button.p-button-info.p-button-outlined, - .p-button-group.p-button-info > .p-button.p-button-outlined, - .p-splitbutton.p-button-info > .p-button.p-button-outlined { +.p-buttonset.p-button-info > .p-button.p-button-outlined, +.p-splitbutton.p-button-info > .p-button.p-button-outlined { background-color: transparent; color: #35a4cc; border: 2px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(53, 164, 204, 0.04); color: #35a4cc; border: 2px solid; } .p-button.p-button-info.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active { background: rgba(53, 164, 204, 0.16); color: #35a4cc; border: 2px solid; } .p-button.p-button-info.p-button-text, - .p-button-group.p-button-info > .p-button.p-button-text, - .p-splitbutton.p-button-info > .p-button.p-button-text { +.p-buttonset.p-button-info > .p-button.p-button-text, +.p-splitbutton.p-button-info > .p-button.p-button-text { background-color: transparent; color: #35a4cc; border-color: transparent; } .p-button.p-button-info.p-button-text:not(:disabled):hover, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover { background: rgba(53, 164, 204, 0.04); border-color: transparent; color: #35a4cc; } .p-button.p-button-info.p-button-text:not(:disabled):active, - .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active { background: rgba(53, 164, 204, 0.16); border-color: transparent; color: #35a4cc; } + .p-button.p-button-success, - .p-button-group.p-button-success > .p-button, - .p-splitbutton.p-button-success > .p-button { +.p-buttonset.p-button-success > .p-button, +.p-splitbutton.p-button-success > .p-button { color: #ffffff; background: #8bae2c; border: 1px solid #8bae2c; } .p-button.p-button-success:not(:disabled):hover, - .p-button-group.p-button-success > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button:not(:disabled):hover { background: #7d9d28; color: #ffffff; border-color: #7d9d28; } .p-button.p-button-success:not(:disabled):focus, - .p-button-group.p-button-success > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-success > .p-button:not(:disabled):focus { +.p-buttonset.p-button-success > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-success > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #d5e7a2; } .p-button.p-button-success:not(:disabled):active, - .p-button-group.p-button-success > .p-button:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button:not(:disabled):active { +.p-buttonset.p-button-success > .p-button:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button:not(:disabled):active { background: #6f8b23; color: #ffffff; border-color: #6f8b23; } .p-button.p-button-success.p-button-outlined, - .p-button-group.p-button-success > .p-button.p-button-outlined, - .p-splitbutton.p-button-success > .p-button.p-button-outlined { +.p-buttonset.p-button-success > .p-button.p-button-outlined, +.p-splitbutton.p-button-success > .p-button.p-button-outlined { background-color: transparent; color: #8bae2c; border: 2px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(139, 174, 44, 0.04); color: #8bae2c; border: 2px solid; } .p-button.p-button-success.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active { background: rgba(139, 174, 44, 0.16); color: #8bae2c; border: 2px solid; } .p-button.p-button-success.p-button-text, - .p-button-group.p-button-success > .p-button.p-button-text, - .p-splitbutton.p-button-success > .p-button.p-button-text { +.p-buttonset.p-button-success > .p-button.p-button-text, +.p-splitbutton.p-button-success > .p-button.p-button-text { background-color: transparent; color: #8bae2c; border-color: transparent; } .p-button.p-button-success.p-button-text:not(:disabled):hover, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover { background: rgba(139, 174, 44, 0.04); border-color: transparent; color: #8bae2c; } .p-button.p-button-success.p-button-text:not(:disabled):active, - .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active { background: rgba(139, 174, 44, 0.16); border-color: transparent; color: #8bae2c; } + .p-button.p-button-warning, - .p-button-group.p-button-warning > .p-button, - .p-splitbutton.p-button-warning > .p-button { +.p-buttonset.p-button-warning > .p-button, +.p-splitbutton.p-button-warning > .p-button { color: #ffffff; background: #ff922a; border: 1px solid #ff922a; } .p-button.p-button-warning:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):hover { background: #ff830c; color: #ffffff; border-color: #ff830c; } .p-button.p-button-warning:not(:disabled):focus, - .p-button-group.p-button-warning > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { +.p-buttonset.p-button-warning > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #ffd3aa; } .p-button.p-button-warning:not(:disabled):active, - .p-button-group.p-button-warning > .p-button:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button:not(:disabled):active { background: #ee7400; color: #ffffff; border-color: #ee7400; } .p-button.p-button-warning.p-button-outlined, - .p-button-group.p-button-warning > .p-button.p-button-outlined, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined { +.p-buttonset.p-button-warning > .p-button.p-button-outlined, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined { background-color: transparent; color: #ff922a; border: 2px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(255, 146, 42, 0.04); color: #ff922a; border: 2px solid; } .p-button.p-button-warning.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active { background: rgba(255, 146, 42, 0.16); color: #ff922a; border: 2px solid; } .p-button.p-button-warning.p-button-text, - .p-button-group.p-button-warning > .p-button.p-button-text, - .p-splitbutton.p-button-warning > .p-button.p-button-text { +.p-buttonset.p-button-warning > .p-button.p-button-text, +.p-splitbutton.p-button-warning > .p-button.p-button-text { background-color: transparent; color: #ff922a; border-color: transparent; } .p-button.p-button-warning.p-button-text:not(:disabled):hover, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover { background: rgba(255, 146, 42, 0.04); border-color: transparent; color: #ff922a; } .p-button.p-button-warning.p-button-text:not(:disabled):active, - .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active { background: rgba(255, 146, 42, 0.16); border-color: transparent; color: #ff922a; } + .p-button.p-button-help, - .p-button-group.p-button-help > .p-button, - .p-splitbutton.p-button-help > .p-button { +.p-buttonset.p-button-help > .p-button, +.p-splitbutton.p-button-help > .p-button { color: #ffffff; background: #7654d4; border: 1px solid #7654d4; } .p-button.p-button-help:not(:disabled):hover, - .p-button-group.p-button-help > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button:not(:disabled):hover { background: #633cce; color: #ffffff; border-color: #633cce; } .p-button.p-button-help:not(:disabled):focus, - .p-button-group.p-button-help > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-help > .p-button:not(:disabled):focus { +.p-buttonset.p-button-help > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-help > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #c8bbee; } .p-button.p-button-help:not(:disabled):active, - .p-button-group.p-button-help > .p-button:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button:not(:disabled):active { +.p-buttonset.p-button-help > .p-button:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button:not(:disabled):active { background: #5530bd; color: #ffffff; border-color: #5530bd; } .p-button.p-button-help.p-button-outlined, - .p-button-group.p-button-help > .p-button.p-button-outlined, - .p-splitbutton.p-button-help > .p-button.p-button-outlined { +.p-buttonset.p-button-help > .p-button.p-button-outlined, +.p-splitbutton.p-button-help > .p-button.p-button-outlined { background-color: transparent; color: #7654d4; border: 2px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(118, 84, 212, 0.04); color: #7654d4; border: 2px solid; } .p-button.p-button-help.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active { background: rgba(118, 84, 212, 0.16); color: #7654d4; border: 2px solid; } .p-button.p-button-help.p-button-text, - .p-button-group.p-button-help > .p-button.p-button-text, - .p-splitbutton.p-button-help > .p-button.p-button-text { +.p-buttonset.p-button-help > .p-button.p-button-text, +.p-splitbutton.p-button-help > .p-button.p-button-text { background-color: transparent; color: #7654d4; border-color: transparent; } .p-button.p-button-help.p-button-text:not(:disabled):hover, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover { background: rgba(118, 84, 212, 0.04); border-color: transparent; color: #7654d4; } .p-button.p-button-help.p-button-text:not(:disabled):active, - .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active { background: rgba(118, 84, 212, 0.16); border-color: transparent; color: #7654d4; } + .p-button.p-button-danger, - .p-button-group.p-button-danger > .p-button, - .p-splitbutton.p-button-danger > .p-button { +.p-buttonset.p-button-danger > .p-button, +.p-splitbutton.p-button-danger > .p-button { color: #ffffff; background: #d45472; border: 1px solid #d45472; } .p-button.p-button-danger:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):hover { background: #ce3c5e; color: #ffffff; border-color: #ce3c5e; } .p-button.p-button-danger:not(:disabled):focus, - .p-button-group.p-button-danger > .p-button:not(:disabled):focus, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { +.p-buttonset.p-button-danger > .p-button:not(:disabled):focus, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):focus { box-shadow: 0 0 0 0.1rem #eebbc7; } .p-button.p-button-danger:not(:disabled):active, - .p-button-group.p-button-danger > .p-button:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button:not(:disabled):active { background: #bd3051; color: #ffffff; border-color: #bd3051; } .p-button.p-button-danger.p-button-outlined, - .p-button-group.p-button-danger > .p-button.p-button-outlined, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined { +.p-buttonset.p-button-danger > .p-button.p-button-outlined, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined { background-color: transparent; color: #d45472; border: 2px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover { background: rgba(212, 84, 114, 0.04); color: #d45472; border: 2px solid; } .p-button.p-button-danger.p-button-outlined:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active { background: rgba(212, 84, 114, 0.16); color: #d45472; border: 2px solid; } .p-button.p-button-danger.p-button-text, - .p-button-group.p-button-danger > .p-button.p-button-text, - .p-splitbutton.p-button-danger > .p-button.p-button-text { +.p-buttonset.p-button-danger > .p-button.p-button-text, +.p-splitbutton.p-button-danger > .p-button.p-button-text { background-color: transparent; color: #d45472; border-color: transparent; } .p-button.p-button-danger.p-button-text:not(:disabled):hover, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover { background: rgba(212, 84, 114, 0.04); border-color: transparent; color: #d45472; } .p-button.p-button-danger.p-button-text:not(:disabled):active, - .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, - .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { +.p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, +.p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active { background: rgba(212, 84, 114, 0.16); border-color: transparent; color: #d45472; } + .p-button.p-button-link { color: #3c5ece; background: transparent; @@ -2445,6 +2573,7 @@ color: #3c5ece; border-color: transparent; } + .p-speeddial-button.p-button.p-button-icon-only { width: 4rem; height: 4rem; @@ -2456,14 +2585,17 @@ width: 1.3rem; height: 1.3rem; } + .p-speeddial-list { outline: 0 none; } + .p-speeddial-item.p-focus > .p-speeddial-action { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-speeddial-action { width: 3rem; height: 3rem; @@ -2474,45 +2606,52 @@ background: #585858; color: #fff; } + .p-speeddial-direction-up .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-up .p-speeddial-item:first-child { margin-bottom: 0.5rem; } + .p-speeddial-direction-down .p-speeddial-item { margin: 0.25rem 0; } .p-speeddial-direction-down .p-speeddial-item:first-child { margin-top: 0.5rem; } + .p-speeddial-direction-left .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-left .p-speeddial-item:first-child { margin-right: 0.5rem; } + .p-speeddial-direction-right .p-speeddial-item { margin: 0 0.25rem; } .p-speeddial-direction-right .p-speeddial-item:first-child { margin-left: 0.5rem; } + .p-speeddial-circle .p-speeddial-item, - .p-speeddial-semi-circle .p-speeddial-item, - .p-speeddial-quarter-circle .p-speeddial-item { +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { margin: 0; } .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child, - .p-speeddial-semi-circle .p-speeddial-item:first-child, - .p-speeddial-semi-circle .p-speeddial-item:last-child, - .p-speeddial-quarter-circle .p-speeddial-item:first-child, - .p-speeddial-quarter-circle .p-speeddial-item:last-child { +.p-speeddial-semi-circle .p-speeddial-item:first-child, +.p-speeddial-semi-circle .p-speeddial-item:last-child, +.p-speeddial-quarter-circle .p-speeddial-item:first-child, +.p-speeddial-quarter-circle .p-speeddial-item:last-child { margin: 0; } + .p-speeddial-mask { background-color: rgba(0, 0, 0, 0.4); } + .p-splitbutton { border-radius: 6px; } @@ -2590,6 +2729,7 @@ .p-splitbutton.p-button-lg > .p-button .p-button-icon { font-size: 1.25rem; } + .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; color: #8191a6; @@ -2618,6 +2758,7 @@ border-color: transparent; color: #8191a6; } + .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; color: #35a4cc; @@ -2646,6 +2787,7 @@ border-color: transparent; color: #35a4cc; } + .p-splitbutton.p-button-success.p-button-outlined > .p-button { background-color: transparent; color: #8bae2c; @@ -2674,6 +2816,7 @@ border-color: transparent; color: #8bae2c; } + .p-splitbutton.p-button-warning.p-button-outlined > .p-button { background-color: transparent; color: #ff922a; @@ -2702,6 +2845,7 @@ border-color: transparent; color: #ff922a; } + .p-splitbutton.p-button-help.p-button-outlined > .p-button { background-color: transparent; color: #7654d4; @@ -2730,6 +2874,7 @@ border-color: transparent; color: #7654d4; } + .p-splitbutton.p-button-danger.p-button-outlined > .p-button { background-color: transparent; color: #d45472; @@ -2758,8 +2903,9 @@ border-color: transparent; color: #d45472; } + .p-carousel .p-carousel-content .p-carousel-prev, - .p-carousel .p-carousel-content .p-carousel-next { +.p-carousel .p-carousel-content .p-carousel-next { width: 2rem; height: 2rem; color: #898989; @@ -2770,13 +2916,13 @@ margin: 0.5rem; } .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover, - .p-carousel .p-carousel-content .p-carousel-next:enabled:hover { +.p-carousel .p-carousel-content .p-carousel-next:enabled:hover { color: #6c6c6c; border-color: transparent; background: #edf0fa; } .p-carousel .p-carousel-content .p-carousel-prev:focus-visible, - .p-carousel .p-carousel-content .p-carousel-next:focus-visible { +.p-carousel .p-carousel-content .p-carousel-next:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; @@ -2802,6 +2948,7 @@ background: #ced6f1; color: #585858; } + .p-datatable .p-paginator-top { border-width: 0 0 2px 0; border-radius: 0; @@ -2895,9 +3042,9 @@ padding: 1rem 1rem; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel { width: 2rem; height: 2rem; color: #898989; @@ -2907,17 +3054,17 @@ transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover { color: #6c6c6c; border-color: transparent; background: #edf0fa; } .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, - .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible, +.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; @@ -2947,12 +3094,12 @@ background: #5472d4; } .p-datatable .p-datatable-scrollable-header, - .p-datatable .p-datatable-scrollable-footer { +.p-datatable .p-datatable-scrollable-footer { background: #ffffff; } .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, - .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-thead, +.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-scroller-viewport > .p-scroller > .p-datatable-table > .p-datatable-tfoot { background-color: #ffffff; } .p-datatable .p-datatable-loading-icon { @@ -3055,6 +3202,7 @@ .p-datatable.p-datatable-lg .p-datatable-footer { padding: 1.25rem 1.25rem; } + .p-dataview .p-paginator-top { border-width: 0 0 2px 0; border-radius: 0; @@ -3093,10 +3241,12 @@ .p-dataview .p-dataview-emptymessage { padding: 1rem; } + .p-column-filter-row .p-column-filter-menu-button, - .p-column-filter-row .p-column-filter-clear-button { +.p-column-filter-row .p-column-filter-clear-button { margin-left: 0.5rem; } + .p-column-filter-menu-button { width: 2rem; height: 2rem; @@ -3124,6 +3274,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-column-filter-clear-button { width: 2rem; height: 2rem; @@ -3143,6 +3294,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-column-filter-overlay { background: #ffffff; color: #6c6c6c; @@ -3180,6 +3332,7 @@ border-top: 1px solid #ebebeb; margin: 4px 0; } + .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.5rem 1.5rem; border-bottom: 0 none; @@ -3208,6 +3361,7 @@ .p-column-filter-overlay-menu .p-column-filter-buttonbar { padding: 1rem; } + .p-orderlist .p-orderlist-controls { padding: 1rem; } @@ -3293,6 +3447,7 @@ .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { background: #edf0fa; } + .p-orderlist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3301,6 +3456,7 @@ background: #ffffff; margin: 0; } + .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { background: #edf0fa; color: #6c6c6c; @@ -3339,6 +3495,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-paginator { background: #ffffff; color: #898989; @@ -3348,9 +3505,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first, - .p-paginator .p-paginator-prev, - .p-paginator .p-paginator-next, - .p-paginator .p-paginator-last { +.p-paginator .p-paginator-prev, +.p-paginator .p-paginator-next, +.p-paginator .p-paginator-last { background-color: transparent; border: 0 none; color: #898989; @@ -3361,9 +3518,9 @@ border-radius: 6px; } .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, - .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { +.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover, +.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover { background: #edf0fa; border-color: transparent; color: #6c6c6c; @@ -3420,6 +3577,7 @@ border-color: transparent; color: #6c6c6c; } + .p-picklist .p-picklist-buttons { padding: 1rem; } @@ -3505,6 +3663,7 @@ .p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover { background: #edf0fa; } + .p-picklist-item.cdk-drag-preview { padding: 0.5rem 1rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); @@ -3513,6 +3672,7 @@ background: #ffffff; margin: 0; } + .p-timeline .p-timeline-event-marker { border: 2px solid #5472d4; border-radius: 50%; @@ -3524,19 +3684,20 @@ background-color: #ebebeb; } .p-timeline.p-timeline-vertical .p-timeline-event-opposite, - .p-timeline.p-timeline-vertical .p-timeline-event-content { +.p-timeline.p-timeline-vertical .p-timeline-event-content { padding: 0 1rem; } .p-timeline.p-timeline-vertical .p-timeline-event-connector { width: 2px; } .p-timeline.p-timeline-horizontal .p-timeline-event-opposite, - .p-timeline.p-timeline-horizontal .p-timeline-event-content { +.p-timeline.p-timeline-horizontal .p-timeline-event-content { padding: 1rem 0; } .p-timeline.p-timeline-horizontal .p-timeline-event-connector { height: 2px; } + .p-tree { border: 2px solid #ebebeb; background: #ffffff; @@ -3593,11 +3754,11 @@ color: #585858; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { color: #585858; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, - .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { +.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { color: #585858; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { @@ -3670,6 +3831,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-treetable .p-paginator-top { border-width: 0 0 2px 0; border-radius: 0; @@ -3809,7 +3971,7 @@ background: #5472d4; } .p-treetable .p-treetable-scrollable-header, - .p-treetable .p-treetable-scrollable-footer { +.p-treetable .p-treetable-scrollable-footer { background: #ffffff; } .p-treetable .p-treetable-loading-icon { @@ -3870,6 +4032,7 @@ .p-treetable.p-treetable-lg .p-treetable-footer { padding: 1.25rem 1.25rem; } + .p-virtualscroller .p-virtualscroller-header { background: #ffffff; color: #6c6c6c; @@ -3894,6 +4057,7 @@ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } + .p-accordion .p-accordion-header .p-accordion-header-link { padding: 1rem; border: 2px solid #ebebeb; @@ -3966,6 +4130,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-card { background: #ffffff; color: #6c6c6c; @@ -3991,6 +4156,7 @@ .p-card .p-card-footer { padding: 1rem 0 0 0; } + .p-divider .p-divider-content { background-color: #ffffff; } @@ -4014,6 +4180,7 @@ .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; } + .p-fieldset { border: 2px solid #ebebeb; background: #ffffff; @@ -4054,6 +4221,7 @@ .p-fieldset .p-fieldset-content { padding: 1rem; } + .p-panel .p-panel-header { border: 2px solid #ebebeb; padding: 1rem; @@ -4120,6 +4288,7 @@ width: 100%; text-align: center; } + .p-scrollpanel .p-scrollpanel-bar { background: #f5f5f5; border: 0 none; @@ -4130,6 +4299,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-splitter { border: 2px solid #ebebeb; background: #ffffff; @@ -4151,6 +4321,7 @@ .p-splitter .p-splitter-gutter-resizing { background: #ebebeb; } + .p-tabview .p-tabview-nav-content { scroll-padding-inline: 2.857rem; } @@ -4219,6 +4390,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-toolbar { background: #ffffff; border: 2px solid #ebebeb; @@ -4229,6 +4401,7 @@ .p-toolbar .p-toolbar-separator { margin: 0 0.5rem; } + .p-confirm-popup { background: #ffffff; color: #6c6c6c; @@ -4276,6 +4449,7 @@ .p-confirm-popup .p-confirm-popup-message { margin-left: 1rem; } + .p-dialog { border-radius: 6px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); @@ -4348,6 +4522,7 @@ .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 1rem; } + .p-overlaypanel { background: #ffffff; color: #6c6c6c; @@ -4389,6 +4564,7 @@ .p-overlaypanel.p-overlaypanel-flipped:before { border-top-color: #ffffff; } + .p-sidebar { background: #ffffff; color: #6c6c6c; @@ -4399,7 +4575,7 @@ padding: 1rem; } .p-sidebar .p-sidebar-header .p-sidebar-close, - .p-sidebar .p-sidebar-header .p-sidebar-icon { +.p-sidebar .p-sidebar-header .p-sidebar-icon { width: 2rem; height: 2rem; color: #898989; @@ -4409,13 +4585,13 @@ transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover, - .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { +.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover { color: #6c6c6c; border-color: transparent; background: #edf0fa; } .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible, - .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { +.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; @@ -4429,6 +4605,7 @@ .p-sidebar .p-sidebar-footer { padding: 1rem; } + .p-tooltip .p-tooltip-text { background: #585858; color: #ffffff; @@ -4448,6 +4625,7 @@ .p-tooltip.p-tooltip-bottom .p-tooltip-arrow { border-bottom-color: #585858; } + .p-fileupload .p-fileupload-buttonbar { background: #ffffff; padding: 1rem; @@ -4487,6 +4665,7 @@ .p-fileupload.p-fileupload-advanced .p-message { margin-top: 0; } + .p-fileupload-choose:not(.p-disabled):hover { background: #4868d1; color: #ffffff; @@ -4497,6 +4676,7 @@ color: #ffffff; border-color: #3c5ece; } + .p-breadcrumb { background: #ffffff; border: 2px solid #ebebeb; @@ -4528,6 +4708,7 @@ .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon { color: #898989; } + .p-contextmenu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4575,7 +4756,7 @@ color: #6c6c6c; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #898989; } .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4589,7 +4770,7 @@ color: #6c6c6c; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c6c6c; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4600,7 +4781,7 @@ color: #6c6c6c; } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #898989; } .p-contextmenu .p-menuitem-separator { @@ -4614,6 +4795,7 @@ width: 0.875rem; height: 0.875rem; } + .p-dock .p-dock-list-container { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -4637,31 +4819,32 @@ height: 4rem; } .p-dock.p-dock-top .p-dock-item-second-prev, - .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, - .p-dock.p-dock-bottom .p-dock-item-second-next { +.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev, +.p-dock.p-dock-bottom .p-dock-item-second-next { margin: 0 0.9rem; } .p-dock.p-dock-top .p-dock-item-prev, - .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, - .p-dock.p-dock-bottom .p-dock-item-next { +.p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev, +.p-dock.p-dock-bottom .p-dock-item-next { margin: 0 1.3rem; } .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current { margin: 0 1.5rem; } .p-dock.p-dock-left .p-dock-item-second-prev, - .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, - .p-dock.p-dock-right .p-dock-item-second-next { +.p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev, +.p-dock.p-dock-right .p-dock-item-second-next { margin: 0.9rem 0; } .p-dock.p-dock-left .p-dock-item-prev, - .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, - .p-dock.p-dock-right .p-dock-item-next { +.p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev, +.p-dock.p-dock-right .p-dock-item-next { margin: 1.3rem 0; } .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current { margin: 1.5rem 0; } + @media screen and (max-width: 960px) { .p-dock.p-dock-top .p-dock-list-container, .p-dock.p-dock-bottom .p-dock-list-container { overflow-x: auto; @@ -4720,7 +4903,7 @@ color: #6c6c6c; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #898989; } .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4734,7 +4917,7 @@ color: #6c6c6c; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c6c6c; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4745,7 +4928,7 @@ color: #6c6c6c; } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #898989; } .p-megamenu .p-megamenu-panel { @@ -4803,9 +4986,10 @@ color: #6c6c6c; } .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #898989; } + .p-menu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -4842,7 +5026,7 @@ color: #6c6c6c; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #898989; } .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4856,7 +5040,7 @@ color: #6c6c6c; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c6c6c; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4867,7 +5051,7 @@ color: #6c6c6c; } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #898989; } .p-menu.p-menu-overlay { @@ -4901,6 +5085,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-menubar { padding: 0.5rem; background: #f5f5f5; @@ -4939,7 +5124,7 @@ color: #6c6c6c; } .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #898989; } .p-menubar .p-menuitem > .p-menuitem-content { @@ -4970,7 +5155,7 @@ color: #6c6c6c; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #898989; } .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -4984,7 +5169,7 @@ color: #6c6c6c; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c6c6c; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -4995,7 +5180,7 @@ color: #6c6c6c; } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #898989; } .p-menubar .p-submenu-list { @@ -5012,6 +5197,7 @@ .p-menubar .p-submenu-list .p-submenu-icon { font-size: 0.875rem; } + @media screen and (max-width: 960px) { .p-menubar { position: relative; @@ -5186,7 +5372,7 @@ color: #6c6c6c; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #898989; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5200,7 +5386,7 @@ color: #6c6c6c; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c6c6c; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5211,7 +5397,7 @@ color: #6c6c6c; } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #898989; } .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { @@ -5251,6 +5437,7 @@ border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } + .p-slidemenu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -5293,7 +5480,7 @@ color: #6c6c6c; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #898989; } .p-slidemenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5307,7 +5494,7 @@ color: #6c6c6c; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c6c6c; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5318,7 +5505,7 @@ color: #6c6c6c; } .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-slidemenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #898989; } .p-slidemenu.p-slidemenu-overlay { @@ -5365,6 +5552,7 @@ padding-left: 0.5rem; padding-right: 0.5rem; } + .p-steps .p-steps-item .p-menuitem-link { background: transparent; transition: box-shadow 0.3s; @@ -5409,6 +5597,7 @@ position: absolute; margin-top: -1rem; } + .p-tabmenu .p-tabmenu-nav { background: #ffffff; border: 1px solid #ebebeb; @@ -5479,6 +5668,7 @@ outline-offset: 0; box-shadow: inset 0 0 0 0.1rem #bbc7ee; } + .p-tieredmenu { padding: 0.5rem 0.5rem; background: #ffffff; @@ -5529,7 +5719,7 @@ color: #6c6c6c; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #898989; } .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content { @@ -5543,7 +5733,7 @@ color: #6c6c6c; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon { color: #6c6c6c; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover { @@ -5554,7 +5744,7 @@ color: #6c6c6c; } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, - .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { +.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon { color: #898989; } .p-tieredmenu .p-menuitem-separator { @@ -5568,6 +5758,7 @@ width: 0.875rem; height: 0.875rem; } + .p-inline-message { padding: 0.5rem 0.75rem; margin: 0; @@ -5623,6 +5814,7 @@ .p-inline-message.p-inline-message-icon-only .p-inline-message-icon { margin-right: 0; } + .p-message { margin: 1rem 0; border-radius: 6px; @@ -5711,6 +5903,7 @@ .p-message .p-message-detail { margin-left: 0.5rem; } + .p-toast { opacity: 0.9; } @@ -5761,7 +5954,7 @@ color: #585858; } .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { color: #585858; } .p-toast .p-toast-message.p-toast-message-success { @@ -5771,7 +5964,7 @@ color: #585858; } .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { color: #585858; } .p-toast .p-toast-message.p-toast-message-warn { @@ -5781,7 +5974,7 @@ color: #585858; } .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { color: #585858; } .p-toast .p-toast-message.p-toast-message-error { @@ -5791,9 +5984,10 @@ color: #585858; } .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, - .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { +.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { color: #585858; } + .p-galleria .p-galleria-close { margin: 0.5rem; background: transparent; @@ -5824,7 +6018,7 @@ margin: 0 0.5rem; } .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon, - .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { +.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon { font-size: 2rem; } .p-galleria .p-galleria-item-nav .p-icon-wrapper .p-icon { @@ -5881,7 +6075,7 @@ padding: 1rem 0.25rem; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next { margin: 0.5rem; background-color: transparent; color: #f5f5f5; @@ -5891,7 +6085,7 @@ border-radius: 50%; } .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover, - .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { +.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover { background: rgba(255, 255, 255, 0.1); color: #f5f5f5; } @@ -5900,23 +6094,29 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-galleria-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-mask { --maskbg: rgba(0, 0, 0, 0.9); } + .p-image-preview-indicator { background-color: transparent; color: #f8f9fa; transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } + .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; @@ -5940,6 +6140,7 @@ width: 1.5rem; height: 1.5rem; } + .p-avatar { background-color: #ebebeb; border-radius: 6px; @@ -5960,9 +6161,11 @@ .p-avatar.p-avatar-xl .p-avatar-icon { font-size: 2rem; } + .p-avatar-group .p-avatar { border: 2px solid #ffffff; } + .p-badge { background: #5472d4; color: #ffffff; @@ -6004,6 +6207,7 @@ height: 3rem; line-height: 3rem; } + .p-chip { background-color: #ebebeb; color: #6c6c6c; @@ -6039,6 +6243,7 @@ .p-chip .pi-chip-remove-icon:focus { outline: 0 none; } + .p-inplace .p-inplace-display { padding: 0.5rem 0.75rem; border-radius: 6px; @@ -6053,6 +6258,7 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-progressbar { border: 0 none; height: 1.5rem; @@ -6068,6 +6274,7 @@ color: #ffffff; line-height: 1.5rem; } + .p-scrolltop { width: 3rem; height: 3rem; @@ -6089,6 +6296,7 @@ width: 1.5rem; height: 1.5rem; } + .p-skeleton { background-color: #ebebeb; border-radius: 6px; @@ -6096,6 +6304,7 @@ .p-skeleton:after { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } + .p-tag { background: #5472d4; color: #ffffff; @@ -6128,6 +6337,7 @@ width: 0.75rem; height: 0.75rem; } + .p-terminal { background: #ffffff; color: #6c6c6c; @@ -6146,16 +6356,20 @@ .p-button .p-button-label { font-weight: 600; } - .p-button-group .p-button-label, - .p-togglebutton .p-button-label { + + .p-buttonset .p-button-label, +.p-togglebutton .p-button-label { font-weight: 400; } + .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background-color: #5472d4; } + .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { background-color: #5472d4; } + .p-panel { border: 2px solid #ebebeb; border-radius: 6px; @@ -6166,9 +6380,11 @@ .p-panel .p-panel-content { border: 0 none; } + .p-fieldset .p-fieldset-legend { border-color: transparent; } + .p-accordion .p-accordion-toggle-icon { order: 10; margin-left: auto; @@ -6186,6 +6402,7 @@ .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link { border-bottom: 0 none; } + .p-inline-message.p-inline-message-info { border-color: #e1f2f7; } @@ -6198,30 +6415,39 @@ .p-inline-message.p-inline-message-error { border-color: #f7e1e6; } + .p-inputtext:enabled:focus { box-shadow: none; } + .p-dropdown:not(.p-disabled).p-focus { box-shadow: none; } + .p-multiselect:not(.p-disabled).p-focus { box-shadow: none; } + .p-cascadeselect:not(.p-disabled).p-focus { box-shadow: none; } + .p-autocomplete.p-autocomplete-multiple:not(.p-disabled).p-focus { box-shadow: none; } + .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { box-shadow: none; } + .p-orderlist .p-orderlist-list { border-top: 0 none; } + .p-picklist .p-picklist-list { border-top: 0 none; } + .p-panelmenu .p-panelmenu-icon.pi-chevron-right, .p-panelmenu .p-panelmenu-icon.pi-chevron-down { order: 10; margin-left: auto; @@ -6240,6 +6466,7 @@ padding-bottom: calc(1rem + 2px); border-bottom: 0 none; } + .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { box-shadow: inset 0 2px 0 0 #5472d4; }