diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index 8ec6a5a31a..e8f1386a7e 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -4548,6 +4548,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #383838; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(100, 181, 246, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #64b5f6; + } + .p-stepper .p-stepper-panels { + background: #1e1e1e; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #383838; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1e1e1e; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #64b5f6; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 8a8fac0c86..5976baa7da 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -4548,6 +4548,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #383838; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(129, 199, 132, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #81c784; + } + .p-stepper .p-stepper-panels { + background: #1e1e1e; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #383838; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1e1e1e; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #81c784; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 41ee92a1db..9b9dca8061 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -4548,6 +4548,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #383838; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(255, 213, 79, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #ffd54f; + } + .p-stepper .p-stepper-panels { + background: #1e1e1e; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #383838; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1e1e1e; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #ffd54f; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index b83be208db..fd9f29cd20 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.04); @@ -4605,6 +4605,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #3f4b5b; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.15s; + border-radius: 4px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 1px solid #3f4b5b; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 4px; + transition: color 0.15s, box-shadow 0.15s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: color 0.15s, box-shadow 0.15s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #8dd0ff; + color: #151515; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #8dd0ff; + } + .p-stepper .p-stepper-panels { + background: #2a323d; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #3f4b5b; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.15s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #2a323d; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #8dd0ff; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #3f4b5b; border: 0 none; diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index b2702ced06..2b812214c0 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; @@ -4605,6 +4605,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.15s; + border-radius: 4px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #212529; + border: 1px solid #dee2e6; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 4px; + transition: box-shadow 0.15s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6c757d; + font-weight: 600; + transition: box-shadow 0.15s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #007bff; + color: #ffffff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #212529; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #007bff; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #212529; + } + .p-stepper .p-stepper-separator { + background-color: #dee2e6; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.15s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #212529; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #007bff; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #efefef; border: 0 none; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index 87fa8acdac..e1b5f800fe 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #f3f2f1; @@ -4523,6 +4523,103 @@ .p-splitter .p-splitter-gutter-resizing { background: #edebe9; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 2px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #323130; + border: 1px solid #f3f2f1; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #605e5c; + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #edebe9; + color: #323130; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #323130; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1rem; + color: #323130; + } + .p-stepper .p-stepper-separator { + background-color: #a19f9d; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #323130; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f3f2f1; border: 0 none; diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css index aa481f2e6e..a18b380af0 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -616,10 +616,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -4588,6 +4588,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(251, 191, 36, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #fbbf24; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #fbbf24; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -6901,4 +7004,12 @@ background: #fbbf24; color: #030712; } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + border-style: solid; + border-color: #424b57; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background: #fbbf24; + color: #030712; + } } diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index bfd0410821..d47c1cf5f9 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -616,10 +616,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -4588,6 +4588,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(96, 165, 250, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #60a5fa; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #60a5fa; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -6901,4 +7004,12 @@ background: #60a5fa; color: #030712; } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + border-style: solid; + border-color: #424b57; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background: #60a5fa; + color: #030712; + } } diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index 2b406c4e63..1e4e7c6f82 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -616,10 +616,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -4588,6 +4588,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(34, 211, 238, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #22d3ee; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #22d3ee; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -6901,4 +7004,12 @@ background: #22d3ee; color: #030712; } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + border-style: solid; + border-color: #424b57; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background: #22d3ee; + color: #030712; + } } diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index 4c114b4d96..39794e9976 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -616,10 +616,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -4588,6 +4588,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(52, 211, 153, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #34d399; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #34d399; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -6901,4 +7004,12 @@ background: #34d399; color: #030712; } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + border-style: solid; + border-color: #424b57; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background: #34d399; + color: #030712; + } } diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index 402d54e458..dd8c4d020e 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -616,10 +616,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -4588,6 +4588,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(129, 140, 248, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #818cf8; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #818cf8; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -6901,4 +7004,12 @@ background: #818cf8; color: #030712; } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + border-style: solid; + border-color: #424b57; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background: #818cf8; + color: #030712; + } } diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index c0acae7a33..2e748dcdb4 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -616,10 +616,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -4588,6 +4588,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(244, 114, 182, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #f472b6; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #f472b6; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -6901,4 +7004,12 @@ background: #f472b6; color: #030712; } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + border-style: solid; + border-color: #424b57; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background: #f472b6; + color: #030712; + } } diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css index 68054af94e..d028d9a730 100644 --- a/public/themes/lara-dark-purple/theme.css +++ b/public/themes/lara-dark-purple/theme.css @@ -616,10 +616,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -656,6 +656,7 @@ border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-cascadeselect:not(.p-disabled):hover { border-color: #a78bfa; @@ -666,6 +667,15 @@ box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); border-color: #a78bfa; } + .p-cascadeselect.p-variant-filled { + background-color: #424b57; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-cascadeselect .p-cascadeselect-label { background: transparent; border: 0 none; @@ -706,42 +716,62 @@ transition: box-shadow 0.2s; border-radius: 0; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { - padding: 0.75rem 1.25rem; + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child { + margin-top: 0; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(167, 139, 250, 0.2); + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child { + margin-bottom: 0; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(167, 139, 250, 0.16); } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { + background: rgba(167, 139, 250, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.75rem 1.25rem; + } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon { - width: 0.875rem; - height: 0.875rem; - } - .p-input-filled .p-cascadeselect { - background: #424b57; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #424b57; + .p-checkbox-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #424b57; + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #424b57; + border-radius: 6px; + } .p-checkbox .p-checkbox-box { border: 2px solid #424b57; background: #111827; @@ -750,6 +780,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,64 +791,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #424b57; + background: #111827; + width: 22px; + height: 22px; + color: rgba(255, 255, 255, 0.87); + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #030712; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #a78bfa; background: #a78bfa; } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #a78bfa; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #ddd6fe; background: #ddd6fe; color: #030712; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #a78bfa; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); border-color: #a78bfa; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #ddd6fe; - background: #ddd6fe; - color: #030712; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #fca5a5; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #a78bfa; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #ddd6fe; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #a78bfa; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #424b57; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #ddd6fe; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #a78bfa; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #424b57; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #ddd6fe; + } + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #a78bfa; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); border-color: #a78bfa; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(167, 139, 250, 0.16); + background: #424b57; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #6b7280; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -850,11 +976,90 @@ .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 { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #a78bfa; @@ -865,6 +1070,18 @@ box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); border-color: #a78bfa; } + .p-dropdown.p-variant-filled { + background: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -875,7 +1092,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -917,13 +1134,6 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -936,14 +1146,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(167, 139, 250, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(167, 139, 250, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -956,18 +1180,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #424b57; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1034,14 +1246,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1052,27 +1300,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #424b57; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #a78bfa; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #030712; + transform: translateX(1.25rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #424b57; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #c4b5fd; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #fca5a5; } .p-inputtext { @@ -1086,6 +1332,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #a78bfa; @@ -1099,6 +1346,15 @@ .p-inputtext.p-invalid.p-component { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1112,28 +1368,16 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #fca5a5; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } ::-webkit-input-placeholder { @@ -1165,11 +1409,69 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .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-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2937; color: rgba(255, 255, 255, 0.87); border: 1px solid #424b57; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1189,6 +1491,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1198,15 +1501,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(167, 139, 250, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(167, 139, 250, 0.2); - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1219,10 +1523,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(167, 139, 250, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); + border-color: #a78bfa; + } .p-listbox.p-invalid { border-color: #fca5a5; } @@ -1253,11 +1574,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(167, 139, 250, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #111827; border: 1px solid #424b57; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #a78bfa; @@ -1268,8 +1678,14 @@ box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); border-color: #a78bfa; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1295,22 +1711,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #fca5a5; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #1f2937; color: rgba(255, 255, 255, 0.87); @@ -1327,9 +1733,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1337,7 +1740,11 @@ right: 0.75rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1368,19 +1775,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(167, 139, 250, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(167, 139, 250, 0.24); + } + .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: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(167, 139, 250, 0.2); - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1396,15 +1807,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #424b57; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #424b57; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #fca5a5; } @@ -1429,10 +1831,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #93deac; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #424b57; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #424b57; background: #111827; @@ -1441,15 +1883,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #a78bfa; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); - border-color: #a78bfa; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1457,31 +1891,51 @@ transition-duration: 0.2s; background-color: #030712; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #a78bfa; background: #a78bfa; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #a78bfa; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #ddd6fe; background: #ddd6fe; - color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #030712; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); + border-color: #a78bfa; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #fca5a5; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #a78bfa; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #ddd6fe; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #424b57; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #a78bfa; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #424b57; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #ddd6fe; } .p-rating { @@ -1627,6 +2081,15 @@ .p-treeselect.p-treeselect-clearable .p-treeselect-label { padding-right: 1.75rem; } + .p-treeselect.p-variant-filled { + background: #424b57; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } .p-treeselect .p-treeselect-label { padding: 0.75rem 0.75rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1723,47 +2186,81 @@ .p-input-filled .p-treeselect:not(.p-disabled):hover { background-color: #424b57; } - .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: #424b57; + .p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #424b57; + } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-togglebutton-input { + cursor: pointer; + } + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 1px solid #424b57; + border-radius: 6px; } - .p-togglebutton.p-button { + .p-togglebutton .p-button { background: #1f2937; border: 1px solid #424b57; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .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 { - background: rgba(255, 255, 255, 0.03); - border-color: #424b57; - 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 .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #a78bfa; border-color: #a78bfa; 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-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(255, 255, 255, 0.03); + border-color: #424b57; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #c4b5fd; border-color: #c4b5fd; 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:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #030712; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); + border-color: #a78bfa; + } + .p-togglebutton.p-invalid > .p-button { border-color: #fca5a5; } .p-button { @@ -1919,300 +2416,348 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { color: #020617; background: #94a3b8; border: 1px solid #94a3b8; } - .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover { + .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-fileupload-choose.p-button-secondary:not(:disabled):hover { background: #cbd5e1; color: #020617; border-color: #cbd5e1; } - .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus { + .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-fileupload-choose.p-button-secondary:not(:disabled):focus { box-shadow: 0 0 0 1px #b4bfcd; } - .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { + .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-fileupload-choose.p-button-secondary:not(:disabled):active { background: #e2e8f0; color: #020617; border-color: #e2e8f0; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined { + .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-fileupload-choose.p-button-secondary.p-button-outlined { background-color: transparent; color: #94a3b8; border: 1px solid; } - .p-button.p-button-secondary.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, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover { + .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-fileupload-choose.p-button-secondary.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-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, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { + .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-fileupload-choose.p-button-secondary.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-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text { + .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-fileupload-choose.p-button-secondary.p-button-text { background-color: transparent; color: #94a3b8; border-color: transparent; } - .p-button.p-button-secondary.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, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover { + .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-fileupload-choose.p-button-secondary.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-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, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { + .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-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { background: rgba(148, 163, 184, 0.16); border-color: transparent; color: #94a3b8; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { color: #082f49; background: #38bdf8; border: 1px solid #38bdf8; } - .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover { + .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-fileupload-choose.p-button-info:not(:disabled):hover { background: #7dd3fc; color: #082f49; border-color: #7dd3fc; } - .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus { + .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-fileupload-choose.p-button-info:not(:disabled):focus { box-shadow: 0 0 0 1px #74d1fa; } - .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active { + .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-fileupload-choose.p-button-info:not(:disabled):active { background: #bae6fd; color: #082f49; border-color: #bae6fd; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined { + .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-fileupload-choose.p-button-info.p-button-outlined { background-color: transparent; color: #38bdf8; border: 1px solid; } - .p-button.p-button-info.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, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover { + .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-fileupload-choose.p-button-info.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-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, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active { + .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-fileupload-choose.p-button-info.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-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text { + .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-fileupload-choose.p-button-info.p-button-text { background-color: transparent; color: #38bdf8; border-color: transparent; } - .p-button.p-button-info.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, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover { + .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-fileupload-choose.p-button-info.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-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, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active { + .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-fileupload-choose.p-button-info.p-button-text:not(:disabled):active { background: rgba(56, 189, 248, 0.16); border-color: transparent; color: #38bdf8; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success { color: #052e16; background: #4ade80; border: 1px solid #4ade80; } - .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover { + .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-fileupload-choose.p-button-success:not(:disabled):hover { background: #86efac; color: #052e16; border-color: #86efac; } - .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus { + .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-fileupload-choose.p-button-success:not(:disabled):focus { box-shadow: 0 0 0 1px #80e8a6; } - .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active { + .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-fileupload-choose.p-button-success:not(:disabled):active { background: #bbf7d0; color: #052e16; border-color: #bbf7d0; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined { + .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-fileupload-choose.p-button-success.p-button-outlined { background-color: transparent; color: #4ade80; border: 1px solid; } - .p-button.p-button-success.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, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover { + .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-fileupload-choose.p-button-success.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-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, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active { + .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-fileupload-choose.p-button-success.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-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text { + .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-fileupload-choose.p-button-success.p-button-text { background-color: transparent; color: #4ade80; border-color: transparent; } - .p-button.p-button-success.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, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover { + .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-fileupload-choose.p-button-success.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-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, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active { + .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-fileupload-choose.p-button-success.p-button-text:not(:disabled):active { background: rgba(74, 222, 128, 0.16); border-color: transparent; color: #4ade80; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning { color: #431407; background: #fb923c; border: 1px solid #fb923c; } - .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover { + .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-fileupload-choose.p-button-warning:not(:disabled):hover { background: #fdba74; color: #431407; border-color: #fdba74; } - .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus { + .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-fileupload-choose.p-button-warning:not(:disabled):focus { box-shadow: 0 0 0 1px #fcb377; } - .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active { + .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-fileupload-choose.p-button-warning:not(:disabled):active { background: #fed7aa; color: #431407; border-color: #fed7aa; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined { + .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-fileupload-choose.p-button-warning.p-button-outlined { background-color: transparent; color: #fb923c; border: 1px solid; } - .p-button.p-button-warning.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, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover { + .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-fileupload-choose.p-button-warning.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-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, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active { + .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-fileupload-choose.p-button-warning.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-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text { + .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-fileupload-choose.p-button-warning.p-button-text { background-color: transparent; color: #fb923c; border-color: transparent; } - .p-button.p-button-warning.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, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover { + .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-fileupload-choose.p-button-warning.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-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, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active { + .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-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active { background: rgba(251, 146, 60, 0.16); border-color: transparent; color: #fb923c; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help { color: #3b0764; background: #c084fc; border: 1px solid #c084fc; } - .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover { + .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-fileupload-choose.p-button-help:not(:disabled):hover { background: #d8b4fe; color: #3b0764; border-color: #d8b4fe; } - .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus { + .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-fileupload-choose.p-button-help:not(:disabled):focus { box-shadow: 0 0 0 1px #d3a9fd; } - .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active { + .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-fileupload-choose.p-button-help:not(:disabled):active { background: #e9d5ff; color: #3b0764; border-color: #e9d5ff; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined { + .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-fileupload-choose.p-button-help.p-button-outlined { background-color: transparent; color: #c084fc; border: 1px solid; } - .p-button.p-button-help.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, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover { + .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-fileupload-choose.p-button-help.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-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, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active { + .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-fileupload-choose.p-button-help.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-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text { + .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-fileupload-choose.p-button-help.p-button-text { background-color: transparent; color: #c084fc; border-color: transparent; } - .p-button.p-button-help.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, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover { + .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-fileupload-choose.p-button-help.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-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, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active { + .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-fileupload-choose.p-button-help.p-button-text:not(:disabled):active { background: rgba(192, 132, 252, 0.16); border-color: transparent; color: #c084fc; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger { color: #450a0a; background: #f87171; border: 1px solid #f87171; } - .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover { + .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-fileupload-choose.p-button-danger:not(:disabled):hover { background: #fca5a5; color: #450a0a; border-color: #fca5a5; } - .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus { + .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-fileupload-choose.p-button-danger:not(:disabled):focus { box-shadow: 0 0 0 1px #fa9c9c; } - .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active { + .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-fileupload-choose.p-button-danger:not(:disabled):active { background: #fecaca; color: #450a0a; border-color: #fecaca; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined { + .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-fileupload-choose.p-button-danger.p-button-outlined { background-color: transparent; color: #f87171; border: 1px solid; } - .p-button.p-button-danger.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, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover { + .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-fileupload-choose.p-button-danger.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-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, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active { + .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-fileupload-choose.p-button-danger.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-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text { + .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-fileupload-choose.p-button-danger.p-button-text { background-color: transparent; color: #f87171; border-color: transparent; } - .p-button.p-button-danger.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, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover { + .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-fileupload-choose.p-button-danger.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-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, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active { + .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-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active { background: rgba(248, 113, 113, 0.16); border-color: transparent; color: #f87171; } + .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #111827; + background: #ffffff; + border: 1px solid #ffffff; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #f3f4f6; + color: #111827; + border-color: #f3f4f6; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #e5e7eb; + color: #111827; + border-color: #e5e7eb; + } + .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + color: #ffffff; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #ffffff; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(255, 255, 255, 0.04); + border-color: transparent; + color: #ffffff; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(255, 255, 255, 0.16); + border-color: transparent; + color: #ffffff; + } .p-button.p-button-link { color: #a78bfa; background: transparent; @@ -3320,6 +3865,62 @@ .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { background: rgba(167, 139, 250, 0.24); } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + .p-treenode-content { + display: flex; + align-items: center; + } + .p-tree-filter { + width: 100%; + } + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-tree-loading { + position: relative; + min-height: 4rem; + } + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } .p-tree { border: 1px solid #424b57; background: #1f2937; @@ -3368,7 +3969,7 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox { margin-right: 0.5rem; } - .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { @@ -3418,6 +4019,133 @@ .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background: rgba(110, 64, 247, 0.16); } + .p-treetable { + position: relative; + } + .p-treetable > .p-treetable-wrapper { + overflow: auto; + } + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + .p-treetable-selectable .p-treetable-tbody > tr { + cursor: pointer; + } + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + vertical-align: middle; + overflow: hidden; + position: relative; + } + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + .p-treetable-resizable .p-treetable-thead > tr > th, + .p-treetable-resizable .p-treetable-tfoot > tr > td, + .p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + .p-treetable-resizable .p-resizable-column { + background-clip: padding-box; + position: relative; + } + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + /* Scrollable */ + .p-treetable-scrollable-wrapper { + position: relative; + } + .p-treetable-scrollable-header, + .p-treetable-scrollable-footer { + overflow: hidden; + border: 0 none; + } + .p-treetable-scrollable-body { + overflow: auto; + position: relative; + } + .p-treetable-virtual-table { + position: absolute; + } + /* Frozen Columns */ + .p-treetable-frozen-view .p-treetable-scrollable-body { + overflow: hidden; + } + .p-treetable-unfrozen-view { + position: absolute; + top: 0px; + left: 0px; + } + /* Reorder */ + .p-treetable-reorder-indicator-up, + .p-treetable-reorder-indicator-down { + position: absolute; + display: none; + } + /* Loader */ + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + /* Alignment */ + .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-left, + .p-treetable .p-treetable-tfoot > tr > td.p-align-left { + text-align: left; + justify-content: flex-start; + } + .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-right, + .p-treetable .p-treetable-tfoot > tr > td.p-align-right { + text-align: right; + justify-content: flex-end; + } + .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-center, + .p-treetable .p-treetable-tfoot > tr > td.p-align-center { + text-align: center; + justify-content: center; + } .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3860,6 +4588,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(167, 139, 250, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #a78bfa; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #a78bfa; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -5941,6 +6772,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-metergroup .p-metergroup-meter-container { + background: #424b57; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #a78bfa; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #a78bfa; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -6115,4 +7004,12 @@ background: #a78bfa; color: #030712; } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + border-style: solid; + border-color: #424b57; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background: #a78bfa; + color: #030712; + } } diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index febf114cd3..f7b1f8a305 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -616,10 +616,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -4588,6 +4588,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #424b57; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(45, 212, 191, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #2dd4bf; + } + .p-stepper .p-stepper-panels { + background: #1f2937; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #424b57; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2937; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #2dd4bf; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #424b57; border: 0 none; @@ -6901,4 +7004,12 @@ background: #2dd4bf; color: #030712; } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + border-style: solid; + border-color: #424b57; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background: #2dd4bf; + color: #030712; + } } diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index 00289c9b34..84539d6f9d 100644 --- a/public/themes/lara-light-amber/theme.css +++ b/public/themes/lara-light-amber/theme.css @@ -616,10 +616,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #f3f4f6; @@ -4588,6 +4588,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #fffbeb; + color: #b45309; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fef08a; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #f59e0b; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #f59e0b; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -6895,4 +6998,8 @@ background: #f59e0b; color: #ffffff; } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #f59e0b; + color: #ffffff; + } } diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index 9945b026ee..83ab2c8574 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -616,10 +616,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #f3f4f6; @@ -4588,6 +4588,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #bfdbfe; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #eff6ff; + color: #1d4ed8; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #bfdbfe; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #3b82f6; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #3b82f6; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -6895,4 +6998,8 @@ background: #3b82f6; color: #ffffff; } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #3b82f6; + color: #ffffff; + } } diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index 54231338fe..5cbada14d3 100644 --- a/public/themes/lara-light-cyan/theme.css +++ b/public/themes/lara-light-cyan/theme.css @@ -616,10 +616,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #f3f4f6; @@ -4588,6 +4588,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ecfeff; + color: #0e7490; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a5f3fc; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #06b6d4; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #06b6d4; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -6895,4 +6998,8 @@ background: #06b6d4; color: #ffffff; } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #06b6d4; + color: #ffffff; + } } diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index 11fd74acbd..4ef7804c00 100644 --- a/public/themes/lara-light-green/theme.css +++ b/public/themes/lara-light-green/theme.css @@ -616,10 +616,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #f3f4f6; @@ -4588,6 +4588,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #f0fdfa; + color: #047857; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #10b981; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #10b981; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -6895,4 +6998,8 @@ background: #10b981; color: #ffffff; } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #10b981; + color: #ffffff; + } } diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index 10a65c704e..6103f730b0 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -616,10 +616,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #f3f4f6; @@ -4588,6 +4588,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c7d2fe; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #eef2ff; + color: #4338ca; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c7d2fe; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #6366f1; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #6366f1; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -6895,4 +6998,8 @@ background: #6366f1; color: #ffffff; } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #6366f1; + color: #ffffff; + } } diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index beca326814..6df317fea9 100644 --- a/public/themes/lara-light-pink/theme.css +++ b/public/themes/lara-light-pink/theme.css @@ -616,10 +616,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #f3f4f6; @@ -4588,6 +4588,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #fdf2f8; + color: #be185d; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #fbcfe8; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #ec4899; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #ec4899; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -6895,4 +6998,8 @@ background: #ec4899; color: #ffffff; } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ec4899; + color: #ffffff; + } } diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css index 4358cad38d..668628a552 100644 --- a/public/themes/lara-light-purple/theme.css +++ b/public/themes/lara-light-purple/theme.css @@ -616,10 +616,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #f3f4f6; @@ -656,6 +656,7 @@ border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-cascadeselect:not(.p-disabled):hover { border-color: #8b5cf6; @@ -666,6 +667,15 @@ box-shadow: 0 0 0 0.2rem #ddd6fe; border-color: #8b5cf6; } + .p-cascadeselect.p-variant-filled { + background-color: #f3f4f6; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect .p-cascadeselect-label { background: transparent; border: 0 none; @@ -706,42 +716,81 @@ transition: box-shadow 0.2s; border-radius: 0; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { - padding: 0.75rem 1.25rem; + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child { + margin-top: 0; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ddd6fe; + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child { + margin-bottom: 0; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: #6d28d9; background: #f5f3ff; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { + background: rgba(139, 92, 246, 0.24); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.75rem 1.25rem; + } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon { - width: 0.875rem; - height: 0.875rem; - } - .p-input-filled .p-cascadeselect { - background: #f3f4f6; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #f3f4f6; + .p-checkbox-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #ffffff; + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 22px; height: 22px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #d1d5db; + border-radius: 6px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #d1d5db; + background: #ffffff; + width: 22px; + height: 22px; + color: #4b5563; + border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 2px solid #d1d5db; background: #ffffff; @@ -750,6 +799,7 @@ color: #4b5563; border-radius: 6px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -760,64 +810,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #8b5cf6; background: #8b5cf6; } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #8b5cf6; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #6d28d9; background: #6d28d9; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #8b5cf6; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ddd6fe; border-color: #8b5cf6; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #6d28d9; - background: #6d28d9; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #e24c4c; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #8b5cf6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #6d28d9; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #8b5cf6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f3f4f6; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #6d28d9; } - .p-chips .p-chips-multiple-container { - padding: 0.375rem 0.75rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #8b5cf6; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #6d28d9; + } + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #8b5cf6; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #ddd6fe; border-color: #8b5cf6; } + .p-chips .p-chips-multiple-container { + padding: 0.375rem 0.75rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: #f5f3ff; + background: #e5e7eb; color: #4b5563; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #e5e7eb; + color: #4b5563; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -850,11 +976,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #8b5cf6; @@ -865,6 +1070,18 @@ box-shadow: 0 0 0 0.2rem #ddd6fe; border-color: #8b5cf6; } + .p-dropdown.p-variant-filled { + background: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.75rem; } @@ -875,7 +1092,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6b7280; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -917,13 +1134,6 @@ right: 0.75rem; color: #6b7280; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3.5rem; - margin-right: -3.5rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2.5rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.75rem 0; } @@ -936,14 +1146,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #6d28d9; background: #f5f3ff; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(139, 92, 246, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -956,18 +1180,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-dropdown { - background: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1034,14 +1246,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1052,27 +1300,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ddd6fe; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b7bcc5; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #8b5cf6; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #ffffff; + transform: translateX(1.25rem); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b7bcc5; + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #7c3aed; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ddd6fe; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #e24c4c; } .p-inputtext { @@ -1086,6 +1332,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #8b5cf6; @@ -1099,6 +1346,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1112,28 +1368,16 @@ color: #6b7280; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e24c4c; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #6b7280; - } - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2.5rem; } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #6b7280; - } - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2.5rem; } ::-webkit-input-placeholder { @@ -1165,11 +1409,69 @@ font-size: 1.25rem; padding: 0.9375rem 0.9375rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .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-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + .p-inputotp-input { + text-align: center; + width: 2.5rem; + } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #4b5563; border: 1px solid #d1d5db; border-radius: 6px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem 1.25rem; @@ -1189,6 +1491,7 @@ } .p-listbox .p-listbox-list { padding: 0.75rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1198,15 +1501,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #6d28d9; background: #f5f3ff; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ddd6fe; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1.25rem; @@ -1219,10 +1523,27 @@ color: #4b5563; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(139, 92, 246, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #4b5563; + background: #f3f4f6; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; background: #f3f4f6; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #4b5563; + background: #f3f4f6; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ddd6fe; + border-color: #8b5cf6; + } .p-listbox.p-invalid { border-color: #e24c4c; } @@ -1253,11 +1574,100 @@ color: #6d28d9; background: #f5f3ff; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 6px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #8b5cf6; @@ -1268,8 +1678,14 @@ box-shadow: 0 0 0 0.2rem #ddd6fe; border-color: #8b5cf6; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1295,22 +1711,12 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6b7280; - right: 3rem; - } .p-multiselect.p-invalid.p-component { border-color: #e24c4c; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.75rem 0.75rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.75rem; - } .p-multiselect-panel { background: #ffffff; color: #4b5563; @@ -1327,9 +1733,6 @@ border-top-right-radius: 6px; border-top-left-radius: 6px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.75rem; } @@ -1337,7 +1740,11 @@ right: 0.75rem; color: #6b7280; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6b7280; @@ -1368,19 +1775,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #6d28d9; background: #f5f3ff; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(139, 92, 246, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #4b5563; background: #f3f4f6; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ddd6fe; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1396,15 +1807,6 @@ color: #4b5563; background: transparent; } - .p-input-filled .p-multiselect { - background: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f3f4f6; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #e24c4c; } @@ -1429,10 +1831,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #29c76f; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 22px; height: 22px; } + .p-radiobutton .p-radiobutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 2px solid #d1d5db; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #d1d5db; background: #ffffff; @@ -1441,15 +1883,7 @@ color: #4b5563; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #8b5cf6; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #ddd6fe; - border-color: #8b5cf6; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1457,31 +1891,51 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #8b5cf6; background: #8b5cf6; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #8b5cf6; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #6d28d9; background: #6d28d9; - color: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ddd6fe; + border-color: #8b5cf6; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #e24c4c; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #8b5cf6; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #6d28d9; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f3f4f6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #8b5cf6; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #6d28d9; } .p-rating { @@ -1627,6 +2081,15 @@ .p-treeselect.p-treeselect-clearable .p-treeselect-label { padding-right: 1.75rem; } + .p-treeselect.p-variant-filled { + background: #f3f4f6; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-treeselect .p-treeselect-label { padding: 0.75rem 0.75rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1720,50 +2183,84 @@ .p-input-filled .p-treeselect { background: #f3f4f6; } - .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: #f3f4f6; + .p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-togglebutton-input { + cursor: pointer; + } + .p-togglebutton .p-button { + flex: 1 1 auto; } - .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: #ffffff; + .p-togglebutton .p-togglebutton-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 1px solid #d1d5db; + border-radius: 6px; } - .p-togglebutton.p-button { + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #d1d5db; color: #4b5563; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #6b7280; } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #f3f4f6; - border-color: #d1d5db; - 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 { - color: #374151; - } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #8b5cf6; border-color: #8b5cf6; 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-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #f3f4f6; + border-color: #d1d5db; + color: #4b5563; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #374151; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #7c3aed; border-color: #7c3aed; 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:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ddd6fe; + border-color: #8b5cf6; + } + .p-togglebutton.p-invalid > .p-button { border-color: #e24c4c; } .p-button { @@ -1919,300 +2416,348 @@ .p-fluid .p-button-icon-only { width: 3rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { color: #ffffff; background: #64748b; border: 1px solid #64748b; } - .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover { + .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-fileupload-choose.p-button-secondary:not(:disabled):hover { background: #475569; color: #ffffff; border-color: #475569; } - .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus { + .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-fileupload-choose.p-button-secondary:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e2e8f0; } - .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { + .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-fileupload-choose.p-button-secondary:not(:disabled):active { background: #334155; color: #ffffff; border-color: #334155; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined { + .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-fileupload-choose.p-button-secondary.p-button-outlined { background-color: transparent; color: #64748b; border: 1px solid; } - .p-button.p-button-secondary.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, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover { + .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-fileupload-choose.p-button-secondary.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-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, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { + .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-fileupload-choose.p-button-secondary.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-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text { + .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-fileupload-choose.p-button-secondary.p-button-text { background-color: transparent; color: #64748b; border-color: transparent; } - .p-button.p-button-secondary.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, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover { + .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-fileupload-choose.p-button-secondary.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-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, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { + .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-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { background: rgba(100, 116, 139, 0.16); border-color: transparent; color: #64748b; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { color: #ffffff; background: #0ea5e9; border: 1px solid #0ea5e9; } - .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover { + .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-fileupload-choose.p-button-info:not(:disabled):hover { background: #0284c7; color: #ffffff; border-color: #0284c7; } - .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus { + .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-fileupload-choose.p-button-info:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bfdbfe; } - .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active { + .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-fileupload-choose.p-button-info:not(:disabled):active { background: #0369a1; color: #ffffff; border-color: #0369a1; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined { + .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-fileupload-choose.p-button-info.p-button-outlined { background-color: transparent; color: #0ea5e9; border: 1px solid; } - .p-button.p-button-info.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, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover { + .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-fileupload-choose.p-button-info.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-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, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active { + .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-fileupload-choose.p-button-info.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-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text { + .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-fileupload-choose.p-button-info.p-button-text { background-color: transparent; color: #0ea5e9; border-color: transparent; } - .p-button.p-button-info.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, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover { + .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-fileupload-choose.p-button-info.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-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, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active { + .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-fileupload-choose.p-button-info.p-button-text:not(:disabled):active { background: rgba(14, 165, 233, 0.16); border-color: transparent; color: #0ea5e9; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success { color: #ffffff; background: #22c55e; border: 1px solid #22c55e; } - .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover { + .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-fileupload-choose.p-button-success:not(:disabled):hover { background: #16a34a; color: #ffffff; border-color: #16a34a; } - .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus { + .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-fileupload-choose.p-button-success:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #bbf7d0; } - .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active { + .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-fileupload-choose.p-button-success:not(:disabled):active { background: #15803d; color: #ffffff; border-color: #15803d; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined { + .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-fileupload-choose.p-button-success.p-button-outlined { background-color: transparent; color: #22c55e; border: 1px solid; } - .p-button.p-button-success.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, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover { + .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-fileupload-choose.p-button-success.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-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, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active { + .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-fileupload-choose.p-button-success.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-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text { + .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-fileupload-choose.p-button-success.p-button-text { background-color: transparent; color: #22c55e; border-color: transparent; } - .p-button.p-button-success.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, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover { + .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-fileupload-choose.p-button-success.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-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, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active { + .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-fileupload-choose.p-button-success.p-button-text:not(:disabled):active { background: rgba(34, 197, 94, 0.16); border-color: transparent; color: #22c55e; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning { color: #ffffff; background: #f97316; border: 1px solid #f97316; } - .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover { + .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-fileupload-choose.p-button-warning:not(:disabled):hover { background: #ea580c; color: #ffffff; border-color: #ea580c; } - .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus { + .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-fileupload-choose.p-button-warning:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde68a; } - .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active { + .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-fileupload-choose.p-button-warning:not(:disabled):active { background: #c2410c; color: #ffffff; border-color: #c2410c; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined { + .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-fileupload-choose.p-button-warning.p-button-outlined { background-color: transparent; color: #f97316; border: 1px solid; } - .p-button.p-button-warning.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, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover { + .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-fileupload-choose.p-button-warning.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-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, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active { + .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-fileupload-choose.p-button-warning.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-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text { + .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-fileupload-choose.p-button-warning.p-button-text { background-color: transparent; color: #f97316; border-color: transparent; } - .p-button.p-button-warning.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, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover { + .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-fileupload-choose.p-button-warning.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-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, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active { + .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-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active { background: rgba(249, 115, 22, 0.16); border-color: transparent; color: #f97316; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help { color: #ffffff; background: #a855f7; border: 1px solid #a855f7; } - .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover { + .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-fileupload-choose.p-button-help:not(:disabled):hover { background: #9333ea; color: #ffffff; border-color: #9333ea; } - .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus { + .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-fileupload-choose.p-button-help:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #e9d5ff; } - .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active { + .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-fileupload-choose.p-button-help:not(:disabled):active { background: #7e22ce; color: #ffffff; border-color: #7e22ce; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined { + .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-fileupload-choose.p-button-help.p-button-outlined { background-color: transparent; color: #a855f7; border: 1px solid; } - .p-button.p-button-help.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, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover { + .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-fileupload-choose.p-button-help.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-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, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active { + .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-fileupload-choose.p-button-help.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-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text { + .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-fileupload-choose.p-button-help.p-button-text { background-color: transparent; color: #a855f7; border-color: transparent; } - .p-button.p-button-help.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, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover { + .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-fileupload-choose.p-button-help.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-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, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active { + .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-fileupload-choose.p-button-help.p-button-text:not(:disabled):active { background: rgba(168, 85, 247, 0.16); border-color: transparent; color: #a855f7; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger { color: #ffffff; background: #ef4444; border: 1px solid #ef4444; } - .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover { + .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-fileupload-choose.p-button-danger:not(:disabled):hover { background: #dc2626; color: #ffffff; border-color: #dc2626; } - .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus { + .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-fileupload-choose.p-button-danger:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fecaca; } - .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active { + .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-fileupload-choose.p-button-danger:not(:disabled):active { background: #b91c1c; color: #ffffff; border-color: #b91c1c; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined { + .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-fileupload-choose.p-button-danger.p-button-outlined { background-color: transparent; color: #ef4444; border: 1px solid; } - .p-button.p-button-danger.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, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover { + .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-fileupload-choose.p-button-danger.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-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, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active { + .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-fileupload-choose.p-button-danger.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-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text { + .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-fileupload-choose.p-button-danger.p-button-text { background-color: transparent; color: #ef4444; border-color: transparent; } - .p-button.p-button-danger.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, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover { + .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-fileupload-choose.p-button-danger.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-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, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active { + .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-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active { background: rgba(239, 68, 68, 0.16); border-color: transparent; color: #ef4444; } + .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button { + color: #ffffff; + background: #1f2937; + border: 1px solid #1f2937; + } + .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover { + background: #374151; + color: #ffffff; + border-color: #374151; + } + .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus { + box-shadow: none; + } + .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active { + background: #4b5563; + color: #ffffff; + border-color: #4b5563; + } + .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined { + background-color: transparent; + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + color: #1f2937; + border: 1px solid; + } + .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text { + background-color: transparent; + color: #1f2937; + border-color: transparent; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover { + background: rgba(31, 41, 55, 0.04); + border-color: transparent; + color: #1f2937; + } + .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active { + background: rgba(31, 41, 55, 0.16); + border-color: transparent; + color: #1f2937; + } .p-button.p-button-link { color: #6d28d9; background: transparent; @@ -3320,6 +3865,62 @@ .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { background: rgba(139, 92, 246, 0.24); } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + .p-treenode-content { + display: flex; + align-items: center; + } + .p-tree-filter { + width: 100%; + } + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-tree-loading { + position: relative; + min-height: 4rem; + } + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } .p-tree { border: 1px solid #e5e7eb; background: #ffffff; @@ -3368,7 +3969,7 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox { margin-right: 0.5rem; } - .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon { color: #4b5563; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { @@ -3418,6 +4019,133 @@ .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background: #a28fff; } + .p-treetable { + position: relative; + } + .p-treetable > .p-treetable-wrapper { + overflow: auto; + } + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + .p-treetable-selectable .p-treetable-tbody > tr { + cursor: pointer; + } + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + vertical-align: middle; + overflow: hidden; + position: relative; + } + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + .p-treetable-resizable .p-treetable-thead > tr > th, + .p-treetable-resizable .p-treetable-tfoot > tr > td, + .p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + .p-treetable-resizable .p-resizable-column { + background-clip: padding-box; + position: relative; + } + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + /* Scrollable */ + .p-treetable-scrollable-wrapper { + position: relative; + } + .p-treetable-scrollable-header, + .p-treetable-scrollable-footer { + overflow: hidden; + border: 0 none; + } + .p-treetable-scrollable-body { + overflow: auto; + position: relative; + } + .p-treetable-virtual-table { + position: absolute; + } + /* Frozen Columns */ + .p-treetable-frozen-view .p-treetable-scrollable-body { + overflow: hidden; + } + .p-treetable-unfrozen-view { + position: absolute; + top: 0px; + left: 0px; + } + /* Reorder */ + .p-treetable-reorder-indicator-up, + .p-treetable-reorder-indicator-down { + position: absolute; + display: none; + } + /* Loader */ + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + /* Alignment */ + .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-left, + .p-treetable .p-treetable-tfoot > tr > td.p-align-left { + text-align: left; + justify-content: flex-start; + } + .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-right, + .p-treetable .p-treetable-tfoot > tr > td.p-align-right { + text-align: right; + justify-content: flex-end; + } + .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-center, + .p-treetable .p-treetable-tfoot > tr > td.p-align-center { + text-align: center; + justify-content: center; + } .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3860,6 +4588,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ddd6fe; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #f5f3ff; + color: #6d28d9; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ddd6fe; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #8b5cf6; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #8b5cf6; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -5941,6 +6772,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ddd6fe; } + .p-metergroup .p-metergroup-meter-container { + background: #e5e7eb; + border-radius: 6px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #8b5cf6; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #8b5cf6; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; @@ -6109,4 +6998,8 @@ background: #8b5cf6; color: #ffffff; } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #8b5cf6; + color: #ffffff; + } } diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index 64e0d85e82..b0ba6ba210 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -616,10 +616,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #f3f4f6; @@ -4588,6 +4588,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4b5563; + border: 1px solid #f3f4f6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6b7280; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #99f6e4; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #0f766e; + color: #0f766e; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4b5563; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #99f6e4; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #14b8a6; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #4b5563; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4b5563; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #14b8a6; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f9fafb; border: 0 none; @@ -6895,4 +6998,8 @@ background: #14b8a6; color: #ffffff; } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #14b8a6; + color: #ffffff; + } } diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index 84b712cab8..baafb141ef 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #4c4c4c; @@ -4532,6 +4532,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 3px; + background: #191919; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #dedede; + border: 1px solid #191919; + border-width: 2px; + background: #191919; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #888888; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ffe082; + color: #212529; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #dedede; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #ffe082; + } + .p-stepper .p-stepper-panels { + background: #323232; + padding: 0.571rem 1rem; + color: #dedede; + } + .p-stepper .p-stepper-separator { + background-color: #191919; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #323232; + color: #dedede; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #ffe082; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index 4ff58f2b59..104d274cd2 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #4c4c4c; @@ -4532,6 +4532,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 3px; + background: #191919; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #dedede; + border: 1px solid #191919; + border-width: 2px; + background: #191919; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #888888; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #81d4fa; + color: #212529; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #dedede; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #81d4fa; + } + .p-stepper .p-stepper-panels { + background: #323232; + padding: 0.571rem 1rem; + color: #dedede; + } + .p-stepper .p-stepper-separator { + background-color: #191919; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #323232; + color: #dedede; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #81d4fa; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index eee205edd0..7c0f306968 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #4c4c4c; @@ -4532,6 +4532,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 3px; + background: #191919; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #dedede; + border: 1px solid #191919; + border-width: 2px; + background: #191919; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #888888; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #c5e1a5; + color: #212529; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #dedede; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #c5e1a5; + } + .p-stepper .p-stepper-panels { + background: #323232; + padding: 0.571rem 1rem; + color: #dedede; + } + .p-stepper .p-stepper-separator { + background-color: #191919; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #323232; + color: #dedede; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #c5e1a5; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 6763ce1df5..cb751f55e8 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #4c4c4c; @@ -4532,6 +4532,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 3px; + background: #191919; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #dedede; + border: 1px solid #191919; + border-width: 2px; + background: #191919; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #888888; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #f48fb1; + color: #212529; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #dedede; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #f48fb1; + } + .p-stepper .p-stepper-panels { + background: #323232; + padding: 0.571rem 1rem; + color: #dedede; + } + .p-stepper .p-stepper-separator { + background-color: #191919; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #323232; + color: #dedede; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #f48fb1; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #3f3f3f; border: 0 none; diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index 037935aac9..11da14af14 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -619,10 +619,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.04); @@ -4616,6 +4616,109 @@ .p-splitter .p-splitter-gutter-resizing { background: hsla(0deg, 0%, 100%, 0.12); } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: none; + border-radius: 4px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 1px solid transparent; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.87); + font-weight: 500; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(159, 168, 218, 0.16); + color: #9FA8DA; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #9FA8DA; + } + .p-stepper .p-stepper-panels { + background: transparent; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #bdbdbd; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: none; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: transparent; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #9FA8DA; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; @@ -8086,6 +8189,24 @@ .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-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + background-color: #9e9d9e; + color: #ffffff; + font-size: 0.857rem; + min-width: 1.714rem; + height: 1.714rem; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background-color: #9FA8DA; + color: #121212; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title { + font-weight: 600; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + margin-inline-start: 1.75rem; + } .p-steps { padding: 1rem 0; } diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index eb840aa6b8..a63a95d3d5 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -619,10 +619,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(0, 0, 0, 0.04); @@ -4616,6 +4616,109 @@ .p-splitter .p-splitter-gutter-resizing { background: rgba(0, 0, 0, 0.12); } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: none; + border-radius: 4px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(0, 0, 0, 0.87); + border: 1px solid transparent; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(0, 0, 0, 0.87); + font-weight: 500; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(63, 81, 181, 0.12); + color: #3F51B5; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(0, 0, 0, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #3F51B5; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1rem; + color: rgba(0, 0, 0, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #bdbdbd; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: none; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: rgba(0, 0, 0, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #3F51B5; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; @@ -8086,6 +8189,24 @@ .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-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + background-color: #9e9d9e; + color: #ffffff; + font-size: 0.857rem; + min-width: 1.714rem; + height: 1.714rem; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background-color: #3F51B5; + color: #ffffff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title { + font-weight: 600; + color: rgba(0, 0, 0, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + margin-inline-start: 1.75rem; + } .p-steps { padding: 1rem 0; } diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index f216e2dc1b..a1beb60c86 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -619,10 +619,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.04); @@ -4616,6 +4616,109 @@ .p-splitter .p-splitter-gutter-resizing { background: hsla(0deg, 0%, 100%, 0.12); } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: none; + border-radius: 4px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 1px solid transparent; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.87); + font-weight: 500; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(159, 168, 218, 0.16); + color: #9FA8DA; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #9FA8DA; + } + .p-stepper .p-stepper-panels { + background: transparent; + padding: 0.75rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #bdbdbd; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: none; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: transparent; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #9FA8DA; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: rgba(255, 255, 255, 0.12); border: 0 none; @@ -8086,6 +8189,24 @@ .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-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + background-color: #9e9d9e; + color: #ffffff; + font-size: 0.857rem; + min-width: 1.714rem; + height: 1.714rem; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background-color: #9FA8DA; + color: #121212; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title { + font-weight: 600; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + margin-inline-start: 1.75rem; + } .p-steps { padding: 1rem 0; } diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index 7b6abc8dcc..42c00049c3 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -619,10 +619,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(0, 0, 0, 0.04); @@ -4616,6 +4616,109 @@ .p-splitter .p-splitter-gutter-resizing { background: rgba(0, 0, 0, 0.12); } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: none; + border-radius: 4px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(0, 0, 0, 0.87); + border: 1px solid transparent; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(0, 0, 0, 0.87); + font-weight: 500; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(63, 81, 181, 0.12); + color: #3F51B5; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(0, 0, 0, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #3F51B5; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.75rem; + color: rgba(0, 0, 0, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #bdbdbd; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: none; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: rgba(0, 0, 0, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #3F51B5; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: rgba(0, 0, 0, 0.12); border: 0 none; @@ -8086,6 +8189,24 @@ .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-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + background-color: #9e9d9e; + color: #ffffff; + font-size: 0.857rem; + min-width: 1.714rem; + height: 1.714rem; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { + background-color: #3F51B5; + color: #ffffff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title { + font-weight: 600; + color: rgba(0, 0, 0, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + margin-inline-start: 1.75rem; + } .p-steps { padding: 1rem 0; } diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css index f507a13147..9ade6b171c 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -621,10 +621,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #d8dee9; @@ -4570,6 +4570,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #c2c7d1; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: none; + border-radius: 4px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #4c566a; + border: 1px solid #ffffff; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #81a1c1; + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c0d0e0; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #d8dee9; + color: #2e3440; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #4c566a; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #c0d0e0; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #5e81ac; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1rem; + color: #4c566a; + } + .p-stepper .p-stepper-separator { + background-color: #e5e9f0; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: none; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #4c566a; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #5e81ac; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #eceff4; border: 0 none; diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index b95c791626..0a102933ab 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #dde1e6; @@ -4548,6 +4548,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 1px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #343a3f; + border: 1px solid #dde1e6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #697077; + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #44a1d9; + color: #ffffff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #343a3f; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #1174c0; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.5rem; + color: #343a3f; + } + .p-stepper .p-stepper-separator { + background-color: #dee2e6; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #343a3f; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #1174c0; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f2f4f8; border: 0 none; diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index b58ae69763..76348dd30c 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #eaeaea; @@ -4523,6 +4523,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #d8dae2; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: background-color 0.2s, box-shadow 0.2s; + border-radius: 3px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #333333; + border: 1px solid #dee2e6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #848484; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #e02365; + color: #ffffff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #333333; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #007ad9; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.571rem 1rem; + color: #333333; + } + .p-stepper .p-stepper-separator { + background-color: #c8c8c8; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #333333; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #007ad9; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index 006aefc160..aefcb692e9 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #eaeaea; @@ -4532,6 +4532,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #d8dae2; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: background-color 0.2s, box-shadow 0.2s; + border-radius: 3px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #333333; + border: 1px solid #dee2e6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #848484; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #007ad9; + color: #ffffff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #333333; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #007ad9; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.571rem 1rem; + color: #333333; + } + .p-stepper .p-stepper-separator { + background-color: #c8c8c8; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #333333; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #007ad9; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index d391b5469d..18a1ccb348 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #eaeaea; @@ -4532,6 +4532,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #d8dae2; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: background-color 0.2s, box-shadow 0.2s; + border-radius: 3px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #333333; + border: 1px solid #dee2e6; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #848484; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #007ad9; + color: #ffffff; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #333333; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #007ad9; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.571rem 1rem; + color: #333333; + } + .p-stepper .p-stepper-separator { + background-color: #c8c8c8; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #333333; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #007ad9; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 2c988a02ee..1f52f3d164 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #f4f4f4; @@ -4523,6 +4523,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #dadada; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + border-radius: 2px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #a6a6a6; + border: 1px solid #c8c8c8; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #a6a6a6; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #afd3c8; + color: #385048; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #666666; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #7b95a3; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 0.571rem 1rem; + color: #666666; + } + .p-stepper .p-stepper-separator { + background-color: #c8c8c8; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #666666; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #7b95a3; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f8f8f8; border: 0 none; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 671e639769..e074ed953e 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; @@ -4548,6 +4548,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #495057; + border: 1px solid #e9ecef; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6c757d; + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a6d5fa; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #e3f2fd; + color: #495057; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #495057; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a6d5fa; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #2196f3; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1rem; + color: #495057; + } + .p-stepper .p-stepper-separator { + background-color: #dee2e6; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #495057; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #2196f3; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 0464203f9d..e448b16e51 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; @@ -4548,6 +4548,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #495057; + border: 1px solid #e9ecef; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6c757d; + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #b7e0b8; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #e8f5e9; + color: #495057; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #495057; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #b7e0b8; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #4caf50; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1rem; + color: #495057; + } + .p-stepper .p-stepper-separator { + background-color: #dee2e6; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #495057; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #4caf50; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 85bdccfbcb..a55d5b2e0a 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; @@ -4548,6 +4548,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #495057; + border: 1px solid #e9ecef; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #6c757d; + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #fff3e0; + color: #495057; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #495057; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #ffc107; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1rem; + color: #495057; + } + .p-stepper .p-stepper-separator { + background-color: #dee2e6; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #495057; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #ffc107; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css index d6b814f3e7..3043f87dc3 100644 --- a/public/themes/soho-dark/theme.css +++ b/public/themes/soho-dark/theme.css @@ -618,10 +618,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -4590,6 +4590,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #3e4053; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(177, 157, 247, 0.16); + color: #b19df7; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #b19df7; + } + .p-stepper .p-stepper-panels { + background: #282936; + padding: 1.25rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #3e4053; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #282936; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #b19df7; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #3e4053; border: 0 none; diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css index 1ce16af341..7895cbeeda 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -618,10 +618,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.2); @@ -4590,6 +4590,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #dfe7ef; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #043d75; + border: 1px solid #f6f9fc; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #708da9; + font-weight: 700; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #e2dcfc; + color: #7254f3; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #043d75; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #7254f3; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #043d75; + } + .p-stepper .p-stepper-separator { + background-color: #dfe7ef; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #043d75; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #7254f3; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #eff3f8; border: 0 none; diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index c141d95f23..c43100d430 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -627,10 +627,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #f4f4f5; @@ -4576,6 +4576,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #e5e7eb; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: none; + border-radius: 0.375rem; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #3f3f46; + border: 1px solid #f4f4f5; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: none; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #71717a; + font-weight: 600; + transition: none; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #6366f1; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #eef2ff; + color: #312e81; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #3f3f46; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #6366f1; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #4f46e5; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1.25rem; + color: #3f3f46; + } + .p-stepper .p-stepper-separator { + background-color: #e5e7eb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: none; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #3f3f46; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #4f46e5; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #fafafa; border: 0 none; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 83d9f4519b..07c4243d02 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -4548,6 +4548,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #304562; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(100, 181, 246, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #64b5f6; + } + .p-stepper .p-stepper-panels { + background: #1f2d40; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #304562; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2d40; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #64b5f6; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index cc5ad6112b..66c67999a7 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -4548,6 +4548,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #304562; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(129, 199, 132, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #81c784; + } + .p-stepper .p-stepper-panels { + background: #1f2d40; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #304562; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2d40; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #81c784; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 1a84226a34..e67b6dd8a4 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -4548,6 +4548,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #304562; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(255, 213, 79, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #ffd54f; + } + .p-stepper .p-stepper-panels { + background: #1f2d40; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #304562; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2d40; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #ffd54f; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css index 39c01c9093..49f6a443aa 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -625,10 +625,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(158, 173, 230, 0.08); @@ -4622,6 +4622,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #263238; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.3s; + border-radius: 6px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 2px solid #263238; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(158, 173, 230, 0.16); + color: #9eade6; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #9eade6; + } + .p-stepper .p-stepper-panels { + background: #161d21; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #263238; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.3s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #161d21; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #9eade6; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #263238; border: 0 none; diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index 7922d44b3d..5befd15f69 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -625,10 +625,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #edf0fa; @@ -4622,6 +4622,109 @@ .p-splitter .p-splitter-gutter-resizing { background: #ebebeb; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.3s; + border-radius: 6px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #6c6c6c; + border: 2px solid #ebebeb; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + margin-left: 0.5rem; + color: #898989; + font-weight: 600; + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #ced6f1; + color: #585858; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #6c6c6c; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #5472d4; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1rem; + color: #6c6c6c; + } + .p-stepper .p-stepper-separator { + background-color: #ebebeb; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.3s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #6c6c6c; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); + } + .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #5472d4; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f5f5f5; border: 0 none;